0

I have div ids like slide1, slide2, slide3, slide4, slide5 but when selecting it using querySelector, it's showing me null.

For testing, I tried this, but never printed "hello". Why is this happening


   if(document.querySelector('#slide-3'))
      {
   console.log("Slide-3 exist")
    }




const [current, setCurrent] = useState(1)
    
    useEffect(()=>{
    if (current === 6) setCurrent(1)
    document.querySelector(`#slide-${current > 5?1:current}`).scrollIntoView();
    }, [current])




return (
    {posts.map((item, i) => (
   <div> <button onClick={() => {setCurrent(cur=>cur+1)}}>Next</button>
   <div id={`slide-${i+1}`}> <h1>Hello world</h1></div>
   </div>})
    )
Arsene Wenger
  • 587
  • 4
  • 21
  • You should use `ref` instead. – Kundan Mar 27 '22 at 06:49
  • 1
    Does this answer your question? [How to access a DOM element in React? What is the equilvalent of document.getElementById() in React](https://stackoverflow.com/questions/38093760/how-to-access-a-dom-element-in-react-what-is-the-equilvalent-of-document-getele) – Martin Mar 27 '22 at 07:50

0 Answers0