title: React: Passing functions as props
body: <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>