title: React - Why doesn't addEventListener work?
body: <p>I am trying to create a website by using GatsbyJS, and I got stuck whenever I need to set a onClick event to toggle a class in one of my components. As a beginner with react and gatsby, I'm having a hard time to do it.</p>
  
  <p>So essentially I want to make the following JS code in React/GatsbyJS:</p>
  
  <pre><code>const hamburger = document.querySelector('.burger_menur');
  hamburger.addEventListener('click', function(){
      this.classList.toggle('open');
  });
  </code></pre>
  
  <p>The following code is my current code in Gatsby component. Have to say, I am using GSAP to make an animation.</p>
  
  <p>This is my code:</p>
  
  <pre><code>import React from 'react';
  import { Tween, Timeline } from 'react-gsap';
  import '../styles/burger.scss'
  
  
  const Burger = () =&gt; (
  
    &lt;Timeline
      target={
  
          &lt;div className='burger'&gt;
              &lt;div className='burger_menu'&gt;
                  &lt;div className='bar half start'&gt;&lt;/div&gt;
                  &lt;div className='bar'&gt;&lt;/div&gt;
                  &lt;div className='bar half end'&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      }
    &gt;
      &lt;Tween from={{ opacity: '0', marginRight: '0rem' }} to={{ opacity: '1', marginRight: '5rem' }} ease="Back.easeOut" delay={2}/&gt;
  
    &lt;/Timeline&gt;
  );
  
  
  export default Burger
  
  </code></pre>
  
  <p>Hopefully someone can help me out with this.</p>