So im not completely new to React but this has me beat, it seems so simple but i just can't get it to work.

I want to go through an array of images and display the image at the current index. Everything works as expected and intended in the console i.e i am seeing the correct index and img url.

But the displayed image doesn't change and i just dont understand why, but i am seeing the first image at image[0] so that works. I also wanna add i've googled around, nothing helped, even tried co-pilot and i gave me basically this so now i am here with my first question. Thanks!

Here's my code:

import { useEffect } from 'react';

import shoe_1 from "../images/shoe_nr_1.jpg";
import shoe_2 from "../images/shoe_nr_2.jpg";
import shoe_3 from "../images/shoe_nr_3.jpg";
import shoe_4 from "../images/shoe_nr_4.jpg";
import shoe_5 from "../images/shoe_nr_5.jpg";
import shoe_6 from "../images/shoe_nr_6.jpg";

function Gallery() {

const images = [shoe_1, shoe_2, shoe_3, shoe_4, shoe_5, shoe_6];
    
let newImage = images[0];

let i = 0;

    const gallery = () => {
        if (i < images.length) {
            newImage = images[i];
            i  ;
            console.log(i);
            console.log(newImage)
        } else {
            i = 0;
            newImage = images[i];
        };

        setTimeout(gallery, 3000);
    };

    useEffect(() => {
        gallery();
    })

    return (
        <div className="w-full mx-auto h-4/6 lg:h-5/6 bg-slate-400">
            <div className="h-full w-full" style={{ backgroundImage: `url("${newImage}")` }}></div>
        </div>
    )
}

export default Gallery

CodePudding user response：

Use useState hook when the data in your component needs to change

import { useEffect, useState } from "react"

import shoe_1 from "../images/shoe_nr_1.jpg"
import shoe_2 from "../images/shoe_nr_2.jpg"
import shoe_3 from "../images/shoe_nr_3.jpg"
import shoe_4 from "../images/shoe_nr_4.jpg"
import shoe_5 from "../images/shoe_nr_5.jpg"
import shoe_6 from "../images/shoe_nr_6.jpg"

function Gallery() {
  const [images, setImages] = useState([
    shoe_1,
    shoe_2,
    shoe_3,
    shoe_4,
    shoe_5,
    shoe_6,
  ])
  const [index, setIndex] = useState(0)

  useEffect(() => {
    if (images.length) {
      const timeoutId = setTimeout(() => {
        setIndex((index   1) % images.length)
      }, 3000)

      return () => clearTimeout(timeoutId)
    }

    return () => {}
  }, [index])

  return (
    <div className="w-full h-screen mx-auto  lg:h-5/6 bg-slate-400">
      <div
        className="min-h-full w-full"
        style={{ backgroundImage: `url("${images[index]}")` }}
      ></div>
    </div>
  )
}

export default Gallery

Edit: Updated the code

CodePudding user response：

import { useEffect, useState } from 'react';

import shoe_1 from "../images/shoe_nr_1.jpg";
import shoe_2 from "../images/shoe_nr_2.jpg";
import shoe_3 from "../images/shoe_nr_3.jpg";
import shoe_4 from "../images/shoe_nr_4.jpg";
import shoe_5 from "../images/shoe_nr_5.jpg";
import shoe_6 from "../images/shoe_nr_6.jpg";

function Gallery() {

const images = [shoe_1, shoe_2, shoe_3, shoe_4, shoe_5, shoe_6];
const [newImage, setNewImage] = useState(images[0]);


let i = 0;

    const gallery = () => {
        if (i < images.length) {
            
            setNewImage(images[i]);
            i  ;
            console.log(i);
            console.log(newImage)
        } else {
            i = 0;
            setNewImage(images[i]);
        };

        setTimeout(gallery, 3000);
    };

    useEffect(() => {
        gallery();
    })

    return (
        <div className="w-full mx-auto h-4/6 lg:h-5/6 bg-slate-400">
            <div className="h-full w-full" style={{ backgroundImage: `url("${newImage}")` }}></div>
        </div>
    )
}

export default Gallery

CodePudding user response：

Ok, so curve ball, I didn't put the dependency [ ] in the useEffect cause some extension told me i didn't need it. Works"ish" with that in place. Now the issue is that is skipps 1 number. Going from image 3 to 5 etc.. But i will try it on my own. Thanks!