NavBar.js

const NavBar = props =>  {
    return( 
      <nav className="navbar navbar-expand-md navbar-dark bg-dark mb-4">
        <a className="navbar-brand" href="#">Top navbar</a>
        <__MenuToggleButton onToggle={props.toggle} show={props.isShowing}/>
        <div className={`${props.show} collapse navbar-collapse`}>
          <ul className="navbar-nav mr-auto">
            <li className="nav-item active">
              <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="#">Link</a>
            </li>
            <li className="nav-item">
              <a className="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
        </div>
      </nav>
    )
  }

export default convertToToggable(NavBar);

function convertToToggable(WrappedComponent){
  return class ToggableComponent extends Component{
    constructor(props){
      super(props);
      this.state = {showMenu:false};
    }
    toggle(){
      this.setState({showMenu:!this.state.showMenu});
    }
    render(){
      const show = this.state.showMenu ? "show" : "";
      return(
        <WrappedComponent show={show} isShowing={this.state.showMenu} toggle={this.toggle.bind(this)}/>
      )
    }
  }
}

Related to my article