React: Passing functions as props

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.

What you put in the onClick parameter will execute during the rendering process, which is not what you want to do. You want to execute some actions during a DOM event.

That's why the tutorial gives you the fat arrow syntax: it means that you are calling a function that returns another function (in this case your handleClick method) so when the markup is rendered, it will execute the function inside the parameter and return your function, that will do the real job when a user clicks on the element.