title: How to pass an event handler to a child component in React
body: <p>I have a <code>&lt;Button /&gt;</code> component I've created in React that abstracts out some of the styling in my application. I am using it in two different contexts - one to submit a login form, and the other to navigate to the registration page (and probably other contexts in the future). </p>
  
  <p>I am trying to figure out how to pass the event handlers from the parent component to the <code>&lt;Button /&gt;</code>. I want to call an <code>onSubmit</code> handler for the login form, but an <code>onClick</code> handler for the navigation button. Is this possible? </p>
  
  <p>I have tried calling the component like this:</p>
  
  <pre><code>&lt;Button text={callToAction} style={styles.callToActionButton} onClick={() =&gt; FlowRouter.go("Auth")}/&gt;
  
  &lt;Button text="Go!" style={styles.registerButton} onSubmit={() =&gt; this.register(this.state.user, this.state.password)}/&gt;
  </code></pre>
  
  <p>I've also tried removing the arrow function, which just causes the functions to execute when the component is loaded:</p>
  
  <pre><code>// executes event handlers on page load
  &lt;Button text={callToAction} style={styles.callToActionButton} onClick={FlowRouter.go("Auth")}/&gt;
  
  &lt;Button text="Go!" style={styles.registerButton} onSubmit={this.register(this.state.user, this.state.password)}/&gt;
  </code></pre>