title: React — onClick in component instance?
body: <p>I have a <code>&lt;button&gt;</code> element inside a <code>&lt;BtnComponent /&gt;</code> (which is inside another component) and I'm trying to handle the click like this:</p>
  
  <p><strong>The BtnContainer.js parent component:</strong></p>
  
  <pre><code>import React from 'react';
  import Btn from './Btn';
  
  
  var BtnContainer = React.createClass({
  
    handleClick() {
      alert('hello');
    },
    render() {
      return (
        &lt;div id="container"&gt;
          &lt;Btn onClick={this.handleClick} /&gt;
        &lt;/div&gt;
      )
    }
  });
  
  module.exports = BtnContainer;
  </code></pre>
  
  <p><strong>Here is the Btn.js component.</strong></p>
  
  <pre><code>import React from 'react';
  
  const Btn = () =&gt; (
    &lt;button className="btn"&gt;Click&lt;/button&gt;
  );
  
  export default Btn;
  </code></pre>
  
  <p>I tried placing the onClick in the actual button element too but got an error.</p>
  
  <p>Thoughts?</p>