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: Select Stars Based on Rating

Posted by Steven De Avila
.a{fill-rule:evenodd;}techdegree seal-36
Steven De Avila
Front End Web Development Techdegree Graduate 18,660 Points

isSelected

I am confused with how isSelected={this.state.rating > i} comes as true or false, and how all the stars up to the one you click change class to selected. Could someone explain this more in depth?

2 Answers

Steven De Avila
.a{fill-rule:evenodd;}techdegree seal-36
Steven De Avila
Front End Web Development Techdegree Graduate 18,660 Points

Steven Parker, Ok. Yes. Now it makes sense to me that we are comparing index to one rating. Thanks.

Steven Parker
Steven Parker
243,200 Points
Steven Parker
Steven Parker
243,200 Points

Steven De Avila — Normally, you'd mark "best answer" on the answer that helped you to resolve the issue!
:see_no_evil:

Steven Parker
Steven Parker
243,200 Points
Steven Parker
Steven Parker
243,200 Points

The code "this.state.rating > i" is a comparison expression. The ">" operator compares the term on the left (rating) to the term on the right (the star's index), and the result is TRUE if the rating is more than the index and FALSE otherwise. All the stars with index numbers less than the rating will get the same value.

This true or false result is then assigned to "isSelected".

Does that explain it clearly enough?

Steven De Avila
.a{fill-rule:evenodd;}techdegree seal-36
Steven De Avila
Front End Web Development Techdegree Graduate 18,660 Points

But why so the stars before the star clicked also receive a rating higher than the index if they are not clicked?

Steven Parker
Steven Parker
243,200 Points
Steven Parker
Steven Parker
243,200 Points

There's only one rating, the stars have different index numbers. So when you click to set a rating, all the stars that have an index number less than the rating are selected.

Joe Elliot
Joe Elliot
5,330 Points

Thanks for answer Steven, I'm still trying to wrap my head around this.

I have a couple of questions if anyone is able to help:

  1. Is the index a value that is permanently attached to each star after creation with the for loop? I don't understand how we can still use the index after it's been rendered. I thought it was just for the benefit of the For loop

  2. How does the boolean of isSelected update after the creation of a Star? I thought it would just be set upon creation? Is it constantly reading the boolean value to see if it's changed?