title: Call function in parent and bind `this` to the child?
body: <p>What I'm trying to do is call a function defined in a parent element from its child, but bind <code>this</code> to the child calling the function, rather than the parent where the function runs.</p>
  
  <p>Is there a way to do this and would this be an anti-pattern if so? Thank you.</p>
  
  <p><strong>Parent Function to Pass to Child</strong></p>
  
  <pre><code>onSelect = (event =&gt; {
    // Some code where `this` is the scope of the child calling the function
    // Not the scope of the parent where the function is defined
  }
  </code></pre>
  
  <p><strong>Parent Render Function</strong></p>
  
  <pre><code>render() {
    return (
      &lt;Child onSelect={this.onSelect} /&gt;
     )
  }
  </code></pre>
  
  <p><strong>Child Render Function</strong></p>
  
  <pre><code>render() {
    return (
      &lt;button onClick={this.props.onSelect.bind(this)} /&gt;
    )
  }
  </code></pre>