ReactJs。组件不会隐藏在onClick上

Question

当我点击按钮时，会显示一个组件。如果再次单击按钮，则组件不会更改状态。

    state = {
        isActive: true
    } 
    toggleMnu = () => {
        this.setState({isActive: false});
    }; // Show menu function

    hideMnu = () => {
        this.setState({isActive: true});
    }; // Hide menu function

    toggleOnClick = e => {
        e.preventDefault();
        !this.props.hideMnu
            ? this.toggleMnu()
            : this.hideMnu();
    };

    render(){
        return(
            <button type="button" onClick={this.toggleOnClick}>Menu</button>
            {this.state.isActive ? null : <div className="extended-menu-item">
            {menuInfo.map((menuItem ,index)=>{return <ExtendedMenuItem click= {this.hideExtendedNav} {...menuItem} key={index}/>
        })} // The component which shows menu on click   
    )}