title: querySelector returned empty element
body: <p>I have problem that when my code auto refreshes after I saved the file on VS Code, <code>theText</code> and <code>theBtn</code> returns the targeted elements and the page displays the content and everything works fine. But whenever I refresh the page manually, the page displays the content, but when I clicked <code>theBtn</code> element to expand the text, the <code>theText</code> and <code>theBtn</code> becomes empty and the page failed with an error saying &quot;cannot read property of undefined&quot;.</p>
  <p>I have been trying to find why, but I could not. Someone please help.
  Thank you.</p>
  <pre><code>import { React, useEffect, useState } from 'react';
      import places from '../data/places';
  
  
  const Tours = () =&gt; {
  return (
      &lt;&gt;
          &lt;div className=&quot;my-20 mx-auto bg-blue-100 &quot; style={{ height: &quot;100%&quot; }}&gt;
              &lt;h1 className=&quot;text-5xl capitalize text-center font-semibold&quot;&gt;our tours&lt;/h1&gt;
              &lt;hr className=&quot;w-20 place-self-center mx-auto border-2 mb-12 mt-2 border-green-600&quot; /&gt;
              &lt;Tuor cTime={new Date().getTime().toString()} /&gt;
          &lt;/div&gt;
      &lt;/&gt;
  )
  }
  
  const Tuor = (props) =&gt; {
  
  const [tuors, setTours] = useState(places);
  
   const theText = document.querySelectorAll(&quot;.theText&quot;)
   const theBtn = document.querySelectorAll(&quot;.theBtn&quot;)
          console.log(theText);
          console.log(theBtn);
  
  
  const expandText = (index) =&gt; {
  
      if (theBtn[index].innerHTML === &quot;read more&quot;) {
          theText[index].style.maxHeight = &quot;50rem&quot;;
          theBtn[index].innerHTML = &quot;show less&quot;;
      } else if (theBtn[index].innerHTML === &quot;show less&quot;) {
          theText[index].style.maxHeight = &quot;6rem&quot;;
          theBtn[index].innerHTML = &quot;read more&quot;;
  
      }
  }
  
  const removePlace = (id) =&gt; {
      const newTours = tuors.filter((place) =&gt; {
          return place.id !== id;
      });
      setTours(newTours);
  }
  return (
      &lt;&gt;
          {
              tuors.map((place, index) =&gt; {
                  let price = new Intl.NumberFormat().format(place.price);
                 
                  return (
                      &lt;&gt;
                          &lt;div key={index} className=&quot;flex flex-col w-2/4 mx-auto bg-white shadow-2xl mb-10&quot;&gt;
  
                              &lt;div&gt;
                                  &lt;img src={place.image} alt={place.title} /&gt;
                              &lt;/div&gt;
  
                              &lt;div className=&quot;flex mt-10&quot;&gt;
                                  &lt;div className=&quot;flex justify-start w-3/4 pl-10&quot;&gt;
                                      &lt;p className=&quot;tracking-widest capitalize font-bold&quot;&gt;{place.title}&lt;/p&gt;
                                  &lt;/div&gt;
                                  &lt;div className=&quot;flex justify-end w-1/4 pr-10&quot;&gt;&lt;p className=&quot;bg-blue-50 tracking-wider p-1 rounded-lg font-bold text-blue-400&quot;&gt;N{price}&lt;/p&gt;&lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div className=&quot;my-5 px-10 py-2&quot;&gt;
                                  &lt;p className=&quot;text-gray-500 theText&quot;&gt;{place.description}&lt;/p&gt;&lt;button className=&quot;text-blue-500 capitalize theBtn&quot; onClick={() =&gt; expandText(index)}&gt;read more&lt;/button&gt;
                              &lt;/div&gt;
                              &lt;button className=&quot;ring-1 ring-red-600 text-red p-1 rounded-sm w-48 mx-auto capitalize my-12&quot; onClick={() =&gt; removePlace(place.id)}&gt;not interested&lt;/button&gt;
                          &lt;/div&gt;
  
                      &lt;/&gt;
                  )
              })
          }
      &lt;/&gt;
  )
  }
  
  
  export default Tours;
  </code></pre>