title: adding and removing a classList in react js
body: <p>I am using functional component in react js , in the below code
  the class right-panel-active is not being added / is undefined. Someone help to enable the class be added when the button is toggled</p>
  <pre><code>import React from 'react';
  import './style.css';
  import {
    Modal,
    DropdownMenu
  } from '../MaterialUI';
  
  /**
  * @author
  * @function Header
  **/
  
  const Header = (props) =&gt; {
  
    const container = () =&gt; {
      document.getElementById('container');
    }    
    const signUpButton = () =&gt; {
       container.classList.add('right-panel-active');
    };  
    const signInButton = () =&gt; {
       container.classList.remove('right-panel-active');
    };
  
    return (
      &lt;div className=&quot;header&quot;&gt;
          &lt;div className=&quot;container&quot; id=&quot;container&quot;&gt;
             &lt;button className=&quot;ghost&quot; id=&quot;signIn&quot; onClick={signInButton} &gt;Sign In&lt;/button&gt;
          &lt;/div&gt;
             &lt;div className=&quot;overlay-panel overlay-right&quot;&gt;
             &lt;p&gt;Enter your personal details and start journey with us&lt;/p&gt;
                  &lt;button className=&quot;ghost&quot; id=&quot;signUp&quot; onClick={signUpButton} &gt;Sign Up&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
    )
  
  }
  
  export default Header
  </code></pre>