Why setRating={ () => this.handleSetRating(i + 1) } ?

I did it exactly this way handleRating={this.handleRating} and it works just fine, but I was able to do this because I used <li onClick={() => props.handleRating(props.id)} in my star component, passing the ID of the star clicked from the Star.js file, instead of referencing the star's ID in the StarRating.js file like Guil did. In that case, instead of using a call to the function without parentheses like I did, he used one with parentheses. This call would be executed immediately if not for the arrow function. So whether or not you reference it with or without an arrow function depends on where you are passing the star's ID in.

@Julien Leguey, as I've got it next things are happening:

During Stars render process every Star component gets a property with a handleRating function inside another function with the value of i+1 passed to it. handleRating don't become called right now because we pass it inside another function which will be called on click event;

I was wondering the same thing, why do we create a function to call another function, why not just call the other function? I think it's because the function we want to call is actually in another function, the for loop, so in order for the function to be called only on the onClick event, we need to pass it a callback function () =>. That is only my interpretation and partly guessed, so I could be wrong, I am still to find somewhere that can explain it in a more human way :S

I just followed the video: // Write a function that returns 5 Star components renderStars() { const stars = []; for (let i = 0; i < 5; i++) { stars.push(<Star key={i} newRating={ () => this.handleRating(i + 1) } isSelected={this.state.rating > i} />); } return stars; }