title: Handling React onToggle event
body: <p>I am working on the below snippet, and I'd like to find out why I am not able to bind <code>onToggle</code> event with button component. I am getting 'onToggle' is not defined on compiling.</p>
  <p>In the main container (Content) I have:</p>
  <pre><code>class Content extends Component {
    constructor() {
      super();
      this.state = {
        user: dataService.User
      }
    }
    onTogglePane(){
      var node = ReactDOM.findDOMNode(this.refs.wrapper);
      node.classList.toggle('toggled');
    }
  onSignOut() {
  dataService.Logout((result) =&gt; {
    this.setState({
      user: null
    })
  });
  }
  render() {
  return (
    &lt;div&gt;
      &lt;Header 
        onClick = {this.onSignOut}
        onToggle ={this.onTogglePane}
      /&gt;
    
    &lt;/div&gt;
   )
   }
  }
  </code></pre>
  <p>In the Button.js I have button component as:</p>
  <pre><code>import React from 'react';
  
  const Button = ({ text, styleClass, onClick }) =&gt; {
    return (
      &lt;button
        type=&quot;button&quot;
        onClick={e =&gt; onClick(e)}
       onToggle={e =&gt; onToggle(e)}
        className={`btn ${styleClass}`}
      &gt;
        {text}
      &lt;/button&gt;
    );
  };
  
  export default Button;
  </code></pre>
  <p>and finally in the Header.js I have</p>
  <pre><code>import React from 'react';
  import Button from 'components/Button';
  class Header extends React.Component {
    constructor(props) {
      super(props);
    }
    render() {
      return (
        &lt;nav className=&quot;navbar navbar-default hk-navbar fixed-top&quot;&gt;
          &lt;p className=&quot;navbar-brand tk-brand&quot;&gt;App&lt;/p&gt;
          &lt;Button
            text={[&lt;i class=&quot;icon icon-logout&quot;&gt;&lt;/i&gt;,  &quot; Sign Out&quot;]}
            onClick = {(e) =&gt; this.props.onClick(e)}
            styleClass = 'btn-control'
          /&gt;
            &lt;Button
            text={[&lt;i class=&quot;icon icon-logout&quot;&gt;&lt;/i&gt;,  &quot; Full Screen&quot;]}
            onToggle = {(e) =&gt; this.props.onToggle(e)}
            styleClass = 'btn-control'
          /&gt;
        &lt;/nav&gt;
      );
    }
  }
  
  export default Header;
  </code></pre>
  <p>Now I am getting this error:</p>
  <pre><code>Failed to compile
  ./src/components/Button.js
    Line 8:  'onToggle' is not defined  no-undef
  
  Search for the keywords to learn more about each error.
  </code></pre>