sliding onClick doesn't translate first time

Question

Can you help me for this code... I want to translate sliders but on first click (for exemple if I click on sliding to right = -600px) it doesn't slide...

const [slidingAvis, setSlidingAvis] = useState(0)
  function handleSliderAvis(direction) {
    if (direction == 'left') {
      setSlidingAvis(slidingAvis - 600)
      document.querySelector('.avis .sliders-avis').style.transform = 'translateX(-' + slidingAvis + 'px)';
    } else {
      setSlidingAvis(slidingAvis + 600)
      document.querySelector('.avis .sliders-avis').style.transform = 'translateX(-' + slidingAvis + 'px)';
    }
} 

on first click, it doesn't translate to -600px.. however I increase the slide before translation

Answer 1

I found the issue, I put the translation of slider in useEffect

const [slidingAvis, setSlidingAvis] = useState(0)
  const [d, setD] = useState()
  function HandleSliderAvis(direction) {
    if (direction == 'left') {
      setD('left')
      setSlidingAvis(slidingAvis - 600)
    } else {
      setD('right')
      setSlidingAvis(slidingAvis + 600)
    }

  }
  useEffect(() => {
    if (d == 'left') {
      document.querySelector('.avis .sliders-avis').style.transform = 'translateX(-' + slidingAvis + 'px)';
    } else {
      document.querySelector('.avis .sliders-avis').style.transform = 'translateX(-' + slidingAvis + 'px)';
    }
    console.log(slidingAvis)
  }, [slidingAvis])