title: React onClientClick not firing my function handler
body: <p>I have a button component, lets call it &lt; MyButton &gt;.</p>
  <pre class="lang-js prettyprint-override"><code>&lt;MyButton
    onClick={this.props.calculate}
    onClientClick={this.changeColor}
  &gt;
     Calculate
  &lt;/MyButton&gt;
  </code></pre>
  <p>When I click the button my <code>calculate</code> function fires. It's an arrow function that lives in the parent component class, and takes an event as a parameter, like <code>calculate = (event) =&gt;{...}</code></p>
  <p>But when I click the button, the <code>changeColor</code> function does not fire. It's also an arrow function, but it lives in the component class that I'm working in. Altogether, with my button code, it looks like this</p>
  <pre class="lang-js prettyprint-override"><code>class Toolbar extends Component {
  
      // a bunch of functions
    
     changeColor = (event) =&gt;{
          console.log(&quot;here&quot;)
     }
  
     // more code
     &lt;MyButton onClick={this.props.calculate} onClientClick={this.changeColor}&gt;
        Calculate
     &lt;/MyButton&gt;
  
  }
  
  </code></pre>
  <p>Why is my <code>changeColor</code> function not working, when I structured it like the <code>calculate</code> function?</p>
  <p>Oddly enough, when I swap out the <code>this.changeColor</code> for a <code>console.log()</code> like <code>onClientclick={console.log(&quot;hello&quot;)}</code> it dumps &quot;hello&quot; in the console. But not when I try to console log through the function itself.</p>