adding and removing a classList in react js

Question

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

import React from 'react';
import './style.css';
import {
  Modal,
  DropdownMenu
} from '../MaterialUI';

/**
* @author
* @function Header
**/

const Header = (props) => {

  const container = () => {
    document.getElementById('container');
  }    
  const signUpButton = () => {
     container.classList.add('right-panel-active');
  };  
  const signInButton = () => {
     container.classList.remove('right-panel-active');
  };

  return (
    <div className="header">
        <div className="container" id="container">
           <button className="ghost" id="signIn" onClick={signInButton} >Sign In</button>
        </div>
           <div className="overlay-panel overlay-right">
           <p>Enter your personal details and start journey with us</p>
                <button className="ghost" id="signUp" onClick={signUpButton} >Sign Up</button>
              </div>
            </div>
  )

}

export default Header

Answer 1

You are not utilising any of React's functionality.

Read about state management in React and Event Handlers in React

const Header = (props) => {
 const [isContainerActive, setIsContainerActive] = React.useState(false);
  const signUpButton = () => {
     setIsContainerActive(false);
  };  
  const signInButton = () => {
     setIsContainerActive(true);
  };

  return (
    <div className="header">
      <div id="container" className={`container${isContainerActive ? " right-panel-active" : ""}`}>
         <button className="ghost" id="signIn" onClick={signInButton}>Sign In</button>
      </div>
      <div className="overlay-panel overlay-right">
       <p>Enter your personal details and start journey with us</p>
       <button className="ghost" id="signUp" onClick={signUpButton}>Sign Up</button>
      </div>
    </div>
  );
}

ReactDOM.render(<Header />, document.getElementById("root"));

.header {height: 120px;}
.container {float:left;}
.overlay-right {display: none;background: red;float:right;height:100%;}
.right-panel-active ~ .overlay-right {display: inline-block;}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

PS: I also recommend https://www.npmjs.com/package/classnames , or the cx library for className management.