title: React passing onClick as props to sub components required?
body: <p>I am trying to trigger an <code>onClick</code> function call inside a sub-component by adding the <code>onClick</code> to the parent component. It does not work.</p>
  
  <pre><code>// parent component
  class MainForm extends Component {
    // code here
  
    handleClick = () =&gt; {
      console.log('clicked!');
    }
  
    render {
      return (
      &lt;Linkbutton
          text="Click Me!"
          onClick={this.handleClick}&gt;
      /&gt;
    );
  };
  
  // sub component
  export const LinkButton = (props) =&gt; {
    return (
      &lt;button&gt;{props.text}&lt;/button&gt;
    );
  };
  </code></pre>
  
  <p>This did not work. The <code>onClick</code> function was not being called on click. I managed to fix it by adding the <code>onClick</code> call in the sub-component as well.</p>
  
  <pre><code>// sub component
  export const LinkButton = (props) =&gt; {
    return (
      &lt;button onClick={props.onClick}&gt;{props.text}&lt;/button&gt;
    );
  };
  </code></pre>
  
  <p>This worked. My question is why? Shouldn't the <code>onClick</code> be called on any element regardless of what is inside it? Why did I have to explicitly pass it down to the sub-component as well? </p>
  
  <p>I would like to understand the reason for it being this way and why it wouldn't work the first way I tried. Thanks!</p>