cant change the backgroud after updating the hook

i have a hook that holds number (as index) and array of images:

  const[currentIndex,setCurrentIndex]=useState(0);
  
  const starsOfTheWeek = [
    {path:'https://i.pinimg.com/474x/c3/aa/45/c3aa4518fdd9de1e17439286c56d3d20.jpg', title:'slide image'},
    {path:'https://i.pinimg.com/474x/97/95/35/97953534c7f8f33099d9346eaad9c628.jpg', title:'slide image'},
    {path:'https://i.pinimg.com/474x/01/d2/3f/01d23f1ecfd89e6482adbd09475bace4.jpg', title:'slide image'},
    {path:'https://i.pinimg.com/474x/d1/bd/dd/d1bddd1a53e124de19af8c2246bb5e6f.jpg', title:'slide image'},
    {path:'https://i.pinimg.com/474x/a5/c6/cb/a5c6cb61fb015c7c61b16aeacc8b8679.jpg', title:'slide image'}
  ];

i made two buttons that hold onClick event that should change the background to another image (by index):

          <div className='slide-left-arrow' onClick={slideToLeft}><i className="fas fa-solid fa-angle-left"></i></div>
          <div className='slide-right-arrow' onClick={slideToRight}><i className="fas fa-solid fa-chevron-right"></i></div>
          <div className='slide-imgs' style={slideImgs}></div>

and the functions:

  const slideToLeft=()=>{debugger
    console.log(starsOfTheWeek[currentIndex].path);
    const first = currentIndex === 0;
    const newIndex = first ? starsOfTheWeek.length-1 : starsOfTheWeek-1;
    setCurrentIndex(newIndex)
    console.log(starsOfTheWeek[newIndex].path);
  }

  const slideToRight=()=>{debugger
    console.log(starsOfTheWeek[currentIndex].path);
    const last = currentIndex === starsOfTheWeek.length-1;
    const newIndex = last ? 0 : starsOfTheWeek+1;
    setCurrentIndex(newIndex)
    console.log(starsOfTheWeek[newIndex].path);
  }

by this the hook (currentIndex) should change and display the next image but its not working. what am i missing?

this is the style for the last div:

  const slideImgs = {
    width: '40%',
    height: '300px',
    backgroundPosition: 'center',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundImage: `url(${starsOfTheWeek[currentIndex].path})`
  }

Answer

I think maybe you might just have a couple of bugs in the logic you’re using to find the new index in each slide function.

In the slideToLeft function you might want to set the index to one less than the current index?

const newIndex = first ? starsOfTheWeek.length-1 : currentIndex-1;

Then you might have a similar problem in the slideToRight function – I’m guessing you just want to do your math on the length of the starsOfTheWeek array?

const newIndex = last ? 0 : starsOfTheWeek.length+1;

Lastly, I can’t see what else might be causing this component to render but you might want to consider wrapping these functions inside of useCallback and passing in the necessary dependencies, something like:

const slideToLeft= useCallBack(()=>{
    console.log(starsOfTheWeek[currentIndex].path);
    const first = currentIndex === 0;
    const newIndex = first ? starsOfTheWeek.length-1 : starsOfTheWeek-1;
    setCurrentIndex(newIndex)
    console.log(starsOfTheWeek[newIndex].path);
  },[currentIndex, starsOfTheWeek])