title: React Mobile navigation doesn't collapse after click
body: <p>I have a mobile navigation bar that appears at a certain breakpoint. If the button MENU is clicked, the menu appears and the button changes to CLOSE. Then clicking on CLOSE collapses the menu and the button is back to MENU. However when I click on the navigation routes the menu stays open. How do I add a conditional here to close the menu when nav buttons are clicked?</p>
  
  <pre><code>var MobileMenu = React.createClass({
    getDefaultProps: function(){
      return {
          isOpen: false
      };
    },
    openForm: function(){
          window.open('http://localhost:8080.com/form', '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes')
      },
    render: function(){
      if (this.props.isOpen){
      return (
          &lt;div className="navMenuButtons"&gt;
            &lt;NavLink to="/" className="navMenuButton"&gt;HOME&lt;/NavLink&gt;
            &lt;NavLink to="/about" className="navMenuButton"&gt;ABOUT&lt;/NavLink&gt;
            &lt;NavLink to="/faq" className="navMenuButton"&gt;FAQ&lt;/NavLink&gt;
            &lt;div className="margin-auto"&gt;
              &lt;NavLink className="navButton applyButton" onClick={this.openForm}&gt;
               APPLY
              &lt;/NavLink&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      )
    }
      return null;
    }
  });
  
  var NavBar = React.createClass({
    getInitialState: function()
          {
              return {
                  isOpen: false
              };
          },
        toggleMenu: function(){
        this.setState({isOpen: !this.state.isOpen});
      },
        openForm: function(){
              window.open('http://localhost:8080/form', '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes')
          },
    render: function(){
        var mobileMenuClass = this.state.isOpen ? 'navBar navBarOpen cl-effect-21' : 'navBarClose navBar cl-effect-21';
        var mobileButton = this.state.isOpen ? 'CLOSE' : 'MENU';
  
        return (
          &lt;div&gt;
              &lt;div className={mobileMenuClass}&gt;
  
              &lt;a href="#" className="mobile_toggle"&gt;
                &lt;div className="toggle_labels"&gt;
                  &lt;div onClick={this.toggleMenu}className="menu navButton"&gt;{mobileButton}&lt;/div&gt;
                &lt;/div&gt;
              &lt;/a&gt;
            &lt;div className="navMenuButtons_desk"&gt;
              &lt;NavLink to="/" className="navMenuButton"&gt;HOME&lt;/NavLink&gt;
              &lt;NavLink to="/about" className="navMenuButton"&gt;ABOUT&lt;/NavLink&gt;
              &lt;NavLink to="/faq" className="navMenuButton"&gt;FAQ&lt;/NavLink&gt;
              &lt;div className="button_right"&gt;
                &lt;NavLink target="_blank" className="navButton applyButton" &gt;&lt;div onClick={this.openForm}&gt;
                  APPLY&lt;/div&gt;
                &lt;/NavLink&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;MobileMenu isOpen={this.state.isOpen} /&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
        );
      }
  });
  
  
  
  
  var App = React.createClass({
  
    render: function(){
      console.log(this.props.location.pathname);
      const location = this.props.location;
      return (
        &lt;div&gt;
          &lt;NavBar /&gt;
          { this.props.children }
          &lt;Footer /&gt;
        &lt;/div&gt;
      );
    }
  });
  </code></pre>