title: An odd result from a passed function to a child component
body: <p>So i'm having an issue understanding the difference in the manner I make a function call to a prop I passed to a child component.</p>
  
  <pre><code>onClick(id)   {
      console.log(id)
  }
  
  &lt;div className="card" onClick={() =&gt; this.props.onClick(this.state.id)}&gt;
  </code></pre>
  
  <p>v.s.</p>
  
  <pre><code>&lt;div className="card" onClick={this.props.onClick(this.state.id)}&gt;
  </code></pre>
  
  <p>The first works as expected and gives me the id of the components state when it is clicked. The second one upon loads prints all of the id's for every component before I even get a chance to click on them. What am I missing? onClick is onClick, why is that return statement so important. Thank you for your help.</p>