Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Solution: Update the Rating State

Julien Leguey
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Julien Leguey
Full Stack JavaScript Techdegree Graduate 21,005 Points

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

On StarRating.js, line 19, why do we have to write : setRating={ () => this.handleSetRating(i + 1) } ? Why can't we write setRating={ this.handleSetRating(i + 1) } ?

Can you post all of the code so that we can see context?

4 Answers

Jordan Kittle
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jordan Kittle
Full Stack JavaScript Techdegree Graduate 20,148 Points

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.

Andrii Kodola
seal-mask
.a{fill-rule:evenodd;}techdegree
Andrii Kodola
Full Stack JavaScript Techdegree Student 16,870 Points

@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;

John Moran
John Moran
7,950 Points

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

Julien Leguey
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Julien Leguey
Full Stack JavaScript Techdegree Graduate 21,005 Points

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; }