title: React — nested onClick handlers?
body: <p>I have a button component inside a parent component and need the button component to handle button style onClick of the button <strong>element</strong>, while the parent handles click of the Btn <strong>component</strong>.</p>
  
  <p>I've got the clickHandler working in the Btn component, but not the parent. What's the best way to do this?</p>
  
  <p><a href="https://jsfiddle.net/kirkbross/69z2wepo/50380/" rel="nofollow">FIDDLE</a></p>
  
  <pre><code>// button component
  class BtnFav extends React.Component {
    constructor(props) {
      super(props);
      this.state = {favorited: false};
      this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
      this.setState({favorited: !this.state.favorited});
    }
    render() {
      var btnStyle = this.state.favorited ? 'btn-fav' : 'btn-notfav';
      var btnText = this.state.favorited ? 'FAVORITED' : 'NOT FAVORITED';
      return (
        &lt;button className={btnStyle} onClick={this.handleClick}&gt;{btnText}&lt;/button&gt;
      );
    }
  };
  // parent
  class BtnParent extends React.Component {
   constructor(props) {
      super(props);
      this.alsoDoThis = this.alsoDoThis.bind(this);
    }
    alsoDoThis() {
      alert('Also do this.');
    }
    render() {
      return (
        &lt;BtnFav onClick={this.alsoDoThis} /&gt;
      );
    }
  };
  
  ReactDOM.render(
    &lt;BtnParent /&gt;,
    document.getElementById('container')
  );
  </code></pre>