title: I'm having a problem triggering this classlist toggle in React
body: <p>I am trying to trigger this CSS open in React the tutorial was in HTML but I cannot use addeventlistner or use document.queryselector so I added an onClick event to the hamburger which should handle both of those issues now I just need to toggle this Class.Please do not mark this as already answered because the answered questions are jquery and regular html related.</p>
  
  <p><strong>Component:</strong></p>
  
  <pre><code>const Navbar = props =&gt; {
    const hamburger = document.querySelector('.hamburger');
    const navLinks = document.querySelector('.nav-links');
    const links = document.querySelectorAll('nav-links li');
  
    // hamburger.addEventListener('click', () =&gt; {
    //   navLinks.classList.toggle("open")
    // });
    useEffect(() =&gt; {
  
  
    }, []);
  
    return (
      &lt;div&gt;
        &lt;nav&gt;
          &lt;div onCLick={//I want to toggle the open class on click} className="hamburger"&gt;
            &lt;div className="line"&gt;&lt;/div&gt;
            &lt;div className="line"&gt;&lt;/div&gt;
            &lt;div className="line"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;ul className="nav-links"&gt;
            &lt;li className="nav-links"&gt;About&lt;/li&gt;
            &lt;li className="nav-links"&gt;About&lt;/li&gt;
            &lt;li className="nav-links"&gt;About&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
    );
  };
  
  export default Navbar;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>nav{
      height: 10vh;
      background: blue !important;
  }
  .nav-links{
      display: flex;
      list-style: none;
      width: 50%;
      height: 100%;
      justify-content: space-around;
      align-items: center;
      margin-left: auto;
  }
  
  /* change to classes */
  .nav-links li a{
      color: white;
      text-decoration: none;
      font-size: 16px
  }
  
  .landing{
      height: 90vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .landing h1{
      margin: 100px;
      font-size: 50px;
  }
  
  @media screen and (max-width: 768px){
      .nav-links{
          position: fixed;
          background: red;
          height: 100vh;
          width: 100%;
          flex-direction: column;
          display: none;
          clip-path: circle(100px at 90% 10%);
          -webkit-clip-path: circle(100px at 90% 10%);
          z-index: 99999;
          transition: all 1s ease-out
      }
  
      .nav-links.open{
          clip-path: circle(1000px at 90% 10%);
          -webkit-clip-path: circle(1000px at 90% 10%);
      }
  
      .line{
          width: 30px;
          height: 3px;
          background: white;
          margin: 5px
      }
  
      nav{
          position: relative
      }
  
      .hamburger{
          position: absolute;
          cursor: pointer;
          right: 5%;
          top: 50%;
          transform: translate(-5%,-50%)
      }
  }
  </code></pre>