Rotating image gallery from tutorial not working when converted from javascript to react

Question

I was following a guide for making a rotating image gallery. The github for it can be found here: https://github.com/HuXn-WebDev/HTML-CSS-JavaScript-100-Projects/tree/main/62.%20Rotating%20Image%20Gallery

In the guide they use plain javascript with get element by id and other things. I have been trying to convert this to a react/typescript app. It works for the most part but there is one weird issue I can't seem to resolve. I can hit the next button twice and it works as expected, but if I click the next button a third time, it goes back to the previous image (essentially doing what the previous button should do). And then for the previous button, it always seems to bring it back to the very first image (instead of scrolling left once).

The rotation is done via css, and it essentially just rotates based on an x variable. Is there something that would explain why the rotation is not working correctly?

const Rotating = () => {

const [currentTransform, setCurrentTransform] = useState(`perspective(1000px) rotateY(0deg)`);
let x = 0;

const handlePreviousButton = () => {
    x = x + 45;
    rotate();
}

const handleNextButton = () => {
    x = x - 45;
    rotate();
}

const rotate = () => {
    setCurrentTransform(`perspective(1000px) rotateY(${x}deg)`);
}


return (
    <div className="rotating-gallery-main-div-style">
        <div className="rotating-gallery-image-container" style={{transform: currentTransform} as React.CSSProperties}>
            <span style={{ "--i": 1 } as React.CSSProperties}>
                <img
                    src="/images/dhh/gallery-images/Farm/01.jpg"
                />
            </span>
            <span style={{ "--i": 2 } as React.CSSProperties}>
                <img
                    src="/images/dhh/gallery-images/Farm/02.jpg"
                />
            </span>
            <span style={{ "--i": 3 } as React.CSSProperties}>
                <img
                    src="/images/dhh/gallery-images/Farm/03.jpg"
                />
            </span>
            <span style={{ "--i": 4 } as React.CSSProperties}>
                <img
                    src="/images/dhh/gallery-images/Farm/04.jpg"
                />
            </span>
            <span style={{ "--i": 5 } as React.CSSProperties}>
                <img
                    src="/images/dhh/gallery-images/Farm/05.jpg"
                />
            </span>
            <span style={{ "--i": 6 } as React.CSSProperties}>
                <img
                    src="/images/dhh/gallery-images/Farm/06.jpg"
                />
            </span>
            <span style={{ "--i": 7 } as React.CSSProperties}>
                <img
                    src="/images/dhh/gallery-images/Farm/07.jpg"
                />
            </span>
            <span style={{ "--i": 8 } as React.CSSProperties}>
                <img
                    src="/images/dhh/gallery-images/Farm/08.jpg"
                />
            </span>
        </div>



    

    <div className="rotating-gallery-btn-container">
          <Button onClick={handlePreviousButton} className="rotating-gallery-prev-btn rotating-gallery-btn" variant="primary">Previous</Button>
          <Button onClick={handleNextButton} className="rotating-gallery-next-btn rotating-gallery-btn" variant="primary">Next</Button>
            </div>

        </div>
    )
}

    .rotating-gallery-image-container {

  position: relative;
  width: 250px;
  height: 250px;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateY(0deg);
  transition: transform 0.7s;
}

.rotating-gallery-image-container span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
}

.rotating-gallery-image-container span img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

Answer 1

If anyone sees this and is curious, I was able to figure out the solution. Instead of using let x=0 and then on button click doing x = x + 45, I changed it to a react use state. So it was instead

const [x, setX] = useState(0);

And in the button click setX(x + 45).

Not sure why the other way didn't work but this got it working for me.