React: Passing functions as props

Question

I have a question concerning passing functions as props. In the tic-tac-toe tutorial (https://facebook.github.io/react/tutorial/tutorial.html) at the end the Game component passes the onClick handler as such:

<div className="game-board">
  <Board
    squares = { current.squares }
    onClick = {(i) => this.handleClick(i) }
  />
</div>

First, why cant we pass the function like this instead:

onClick = { this.handleClick(i) }

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

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

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.

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?

Answer 1

This doesn't pass the function (it calls the function before binding to onClick):

onClick = { this.handleClick(i) }

Alternatively, you could bind:

onClick = { this.handleClick.bind(null, i) }

But the arrow function seems clearer to read (at least IMHO).

For the second issue, the i is a parameter for handleClick, not onClick. onClick does have parameters (the first being the event object), but in this case, you don't need anything from the onClick parameters, so they are left empty.