How to close mobile menu in react when click on link?

Question

I am making an app in react. I am facing issue as my mobile menu remains open even after clicking the navbar items. Does anyone know how it can be closed upon clicking on the navbar items?

class Navbar extends Component { state = { clicked: false};

 handleClick = () => {
     this.setState({clicked:!this.state.clicked})
 };

render () {
    return (
        <nav className={"NavbarItems"}>
            <h1 className={"navbar-logo"}>React<i className={"fab fa-react"}></i></h1>
          
            <div className={"menu-icon"} onClick={this.handleClick}>
                <i className={this.state.clicked ? 'fas fa-times': 'fas fa-bars'}></i>
                
             </div>
           
            <ul className={this.state.clicked?'nav-menu active':'nav-menu'}>
                {MenuItems.map((item, index) => {
                    return (
                        <div key={index}>
                            <li >
                                <Link className={item.cName} to={item.url}>
                                    {item.title}
                                </Link>
                            </li>
                        </div>
                    )
                })}
            </ul>
            <Button><Link className={"nav-button"} to="/contact">Contact Us</Link></Button>
            
        </nav>
    )
}

} export default Navbar;

Answer 1

Could be like this:

<Link to={() => {
    this.handleClick();
    return '/contact'
}} >Contact Us</Link>