title: React - toggle display of one component from the onClick of another component
body: <p>I'm trying to build my first React project, and am currently putting together a burger nav button, and a menu which appears when clicking the nav.</p>
  
  <p>I've broken this into two components; Hamburger and MenuOverlay. The code for both is below.</p>
  
  <p>Currently I have an onClick on Hamburger toggling a class on it, but how would I also toggle the menu from that click? It's hidden with display: none; by default. Probably a very basic question so apologies - still trying to get my head around React.</p>
  
  <p><strong>MenuOverlay</strong></p>
  
  <pre><code>import React from 'react';
  import { Link } from 'react-router';
  
  const MenuOverlay = () =&gt; {
      return (
          &lt;div className="menuOverlay"&gt;
              &lt;div className="innerMenu"&gt;
                  &lt;p&gt;&lt;Link to="/"&gt;Home&lt;/Link&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;Link to="/"&gt;About&lt;/Link&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;Link to="/"&gt;Contact&lt;/Link&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  };
  
  export default MenuOverlay;
  </code></pre>
  
  <p><strong>Hamburger</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Hamburger extends Component {
      constructor(props) {
          super(props);
  
          this.state = { active: '' };
          this.handleClick = this.handleClick.bind(this);
      }
  
      handleClick() {
          var toggle = this.state.active === 'is-active' ? '' : 'is-active';
          this.setState({active: toggle});
      }
  
      render() {
  
          return (
              &lt;button className={`hamburger hamburger--emphatic fadein one ${this.state.active}`} onClick={this.handleClick} type="button"&gt;
                  &lt;span className="homeMenuTextButton"&gt;Menu&lt;/span&gt;
                  &lt;span className="hamburger-box"&gt;
                      &lt;span className="hamburger-inner"&gt;&lt;/span&gt;
                  &lt;/span&gt;
              &lt;/button&gt;
          );
      }
  }
  
  export default Hamburger;
  </code></pre>