React: Passing functions as props
<p>I have a question concerning passing functions as props. 
In the tic-tac-toe tutorial (<a href="https://facebook.github.io/react/tutorial/tutorial.html" rel="noreferrer">https://facebook.github.io/react/tutorial/tutorial.html</a>) at the end the Game component passes the onClick handler as such:</p>

<pre><code>&lt;div className="game-board"&gt;
  &lt;Board
    squares = { current.squares }
    onClick = {(i) =&gt; this.handleClick(i) }
  /&gt;
&lt;/div&gt;
</code></pre>

<p>First, why cant we pass the function like this instead:</p>

<pre><code>onClick = { this.handleClick(i) }
</code></pre>

<p>And I understand that passing "i" is important but something in the middle of the tutorial confused me:</p>

<pre><code>return &lt;Square value={this.state.squares[i]} onClick={() =&gt; this.handleClick(i)} /&gt;;
</code></pre>

<p>Here we don't pass "i" in the parenthesis of the arrow function. I don't want to write too much to make the question less verbose. I am sure some people have gone through this tutorial and will be able to give an answer my questions.</p>

<p>UPDATE: Tnx everyone for the brief and helpful answers. As a follow-up, in the official docs, we are told to bind a function if it is to be used as an event handler for a component. Why is this necessary and how come it was never used it the tutorial?</p>