Paused and play time interval slider in reactjs

Question

I am create a slider worked with time interval and i add extra feature Pause and Play , code ..

const [value, setValue] = useState('1')
  const [status, setStatus] = useState("working");
  const handleChange = (event, newValue) => {
    setValue(newValue)
  }

  useEffect(() => {
   
        console.log(status);
        if (status === "working") {
            const interval = setInterval(() => {
                if(parseInt(value) + 1 === 3) {
                    setValue('1')
                } else {
                    setValue((parseInt(value) + 1).toString())
                }
                document.getElementById('slide' + value).click()
             }, 5000)
            return () => clearInterval(interval)
        }else if(status === "paused"){
            
        }
       
   
  })
  
  const puseSlide = () => {
    setStatus("paused");
  }

return(

<div>
 {value === '1' && (
  <img src={Imageone}/>
 )}
 {value === '2' && (
  <img src={Imagetwo}/>
 )}
 
 <Tabs value={value} onChange={handleChange}>
    <Tab onClick={puseSlide} id="slide1" value="1">.</Tab>
    <Tab onClick={puseSlide} id="slide2" value="1">.</Tab>
 </Tabs>
</div>

)

This slider is working but i am writing onclick event that automatically called first slide change, Why? i am new in react

Answer 1

document.getElementById('slide' + value).click()

This line in useEffect is the cause of the issue. After incrementing the value you are performing a click action on the element with id "slide" or "slide2" which is invoking the function puseSlide. You'd instead want to pause only when the user explicitly clicks on the pause button. To avoid calling the puseSlide function simply remove this line document.getElementById('slide' + value).click() from useEffect hook and you should not observe the function being called after the first slide changes.