title: ReactJs toggle Button to open Menu
body: <p>I built a <code>React</code> component, <code>Toggle Menu</code>, which gets triggered by a button. I'm not able to see the menu open/close after the initial open. A bit lost on how to get started to fix this issue... This is the example I used for reference <a href="https://www.codementor.io/chrisharrington/how-to-build-a-sliding-menu-using-react-js-and-less-css-du107mpij" rel="nofollow noreferrer">How to Build a Sliding Menu Using ReactJS </a></p>
  
  <pre><code>export default class ToggleMenu extends React.Component {
  
    showRight = () =&gt; {
      this.right.show();
    }
  
  
    constructor(props) {
      super(props);
      this.showRight = this.showRight.bind(this);
    }
  
    render() {
  
      return (
        &lt;div&gt;
          &lt;button onClick={this.showRight}&gt;Show Right Menu!&lt;/button&gt;
          &lt;Menu ref={right =&gt; this.right = right} alignment="right"&gt;
          &lt;MenuItem hash="first-page"&gt;First Page&lt;/MenuItem&gt;
          &lt;MenuItem hash="second-page"&gt;Second Page&lt;/MenuItem&gt;
          &lt;MenuItem hash="third-page"&gt;Third Page&lt;/MenuItem&gt;
        &lt;/Menu&gt;
        &lt;/div&gt;
      );
    }
  }
  
  
  export default class Menu extends React.Component {
      state = {
        visible: false,
      };
  
      show() {
        this.setState({ visible: true });
      }
  
      hide() {
        this.setState({ visible: false });
      }
  
      render() {
        const { visible } = this.state;
  
        return (
          &lt;div className="menu"&gt;
            {
              visible &amp;&amp;
                &lt;div className={this.props.alignment}&gt;{this.props.children}&lt;/div&gt;
            }
          &lt;/div&gt;
        );
      }
  }
  </code></pre>