title: React Toggle Menu
body: <p>Im trying to build an Toggle right menu from this example : <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-react-js"</a></p>
  
  <p>the problem is React.createClass is deprecated so i have to change the code and it stop working i get the content but cant access the handlers cann anybody tell me which steps should i do to fix this issue! so if i click on my button i get this error: </p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'show' of undefined</p>
  </blockquote>
  
  <p><strong>ToggleMenu</strong></p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import classnames from 'classnames';
  import localStyles from './ToggleMenu.scss';
  import { themr } from 'react-css-themr';
  import { Menu } from '../../components';
  import { MenuItem } from '../../components';
  
  @themr('ToggleMenu', localStyles)
  
  export default class ToggleMenu extends React.Component {
  
    showRight() {
      this.refs.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;
      );
    }
  }
  </code></pre>
  
  <p><strong>Menu</strong></p>
  
  <pre><code>import React from 'react';
  
  export default class Menu extends React.Component {
      constructor() {
          super();
          this.state = {
              visible: false
          }
      };
  
      show() {
          this.setState({visible: true});
          document.addEventListener("click", this.hide.bind(this));
      }
  
      hide() {
          this.setState({visible: false});
          document.removeEventListener("click", this.hide.bind(this));
      }
  
      render() {
          return (
              &lt;div className="menu"&gt;
                  &lt;div className={(this.state.visible ? "visible " : "") + this.props.alignment}&gt;{this.props.children}&lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong>MenuItem</strong></p>
  
  <pre><code>import React from 'react';
  
  export default class MenuItem extends React.Component {
      navigate(hash) {
          window.location.hash = hash;
      }
  
      render() {
          return (
              &lt;div className="menu-item" onClick={this.navigate.bind(this, this.props.hash)}&gt;{this.props.children}&lt;/div&gt;
          );
      }
  }
  </code></pre>