title: Queryselector returning null for an existing element in React
body: <p>I am not sure why this line of code is returning an error, but I have spent hours on it and I have yet to understand why. I have a div element in the navigation bar with a module class that does not have any changed property within the CSS file, it is just a block. (I have used a module class that does have properties changed within the CSS file but the error has persisted). I did try it with a regular class and the Queryselector found the element, but in this project, I need to use modules. Can anyone please help me understand why this Queryselector returns null when trying to access the div element?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const Nav = () =&gt; {
  useEffect(() =&gt; {
      // console.log(document.querySelector('.testing'))
      window.addEventListener('click', (e) =&gt; {
          // console.log(document.querySelector('.testing'))
          if(document.querySelector(`.${styles.testing}`).contains(e.target)){
              // is not able to find the element with the className 'testing'
              // irrelevant code here
          } 
      })
  }, [])
  
  return (
    &lt;&gt;
      &lt;div className={`${styles.user_interaction_container} ${styles.list}`}&gt;
          &lt;a href="https://www.google.com/"&gt;
              &lt;img src={search} alt="Search" width="16px" height="16px"&gt;&lt;/img&gt;
          &lt;/a&gt;
          &lt;a href="https://www.google.com/"&gt;
              &lt;img src={heart} alt="Liked" width="16px" height="16px"&gt;&lt;/img&gt;
          &lt;/a&gt;
          &lt;a href="https://www.google.com/"&gt;
              &lt;img src={cart} alt="Cart" width="16px" height="16px"&gt;&lt;/img&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div className={styles.testing}&gt;
          &lt;img src={menu} alt="Menu" width="20px" height="20px"&gt;&lt;/img&gt;
      &lt;/div&gt;
    &lt;/&gt;
  )
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.4.2/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  
  Code doesn't work but I just wanted to show what it looks like. Here is a screenshot of the issue (All of the other Queryselectors work)</p>
  <p><a href="https://i.stack.imgur.com/vJS8e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vJS8e.png" alt="enter image description here" /></a></p>
  <p><strong>What I don't understand is how it is able to find other elements identically called but can't access this specific class??</strong></p>
  <p>Any help would greatly be appreciated</p>