How do I close the menu when clicking on a link?

Question

JavaScript

Good afternoon, there is a project on react js (SPA), there is a button to open / close the menu, it has site navigation, how to make the menu close by clicking on the link?

class Header extends Component {

state = {
  menu: false
}

toggleMenuHandler = () => {
  this.setState({
    menu: !this.state.menu
  })
}
  render() {
    return (
      <header id="header">
        <div className="container">
          <div className="header">
            <Logo/>
            <Menu/>
            <User/>
            <MobileMenu
            isOpen={this.state.menu}
            />
            <ToggleMenu
          	onToggle={this.toggleMenuHandler}
          			/>
          </div>
        </div>
      </header>
    )
  }
}
// Меню

const MobileMenu = (props) => {
  const cls = ['mobile-menu'];
   if(!props.isOpen) {
    	cls.push('close')
    }
    return (
    	<div className={cls.join(' ')}
    		onClose={props.onClose}
    		>
          <User/>
          <Menu/>   // Ссылки находятся в этом компоненте UL>LI>A
          <button className="log-out">Sign Out</button>
        </div>
    );
};

Answer 1

To implement this functionality, you can use the "Rise of the state". To do this, the toggleMenuHandler closing handler must be passed in props And inside MobileMenu put the onClick handler ( for some reason you have onClose) props.onClose