In this video, I'll display the selected stars highlighted with a dark blue fill

color by conditionally rendering a class attribute for a list item.

When a user clicks on a star, each star up to the one that was clicked

should be selected or highlighted by changing its fill color with CSS.

In index.css, I included a rule that targets a star SVG inside an element with

the class selected, and changes its fill color to a darker shade of blue.

This could be achieved several different ways.

What I'll do is pass a prop to the star component named isSelected.

As the value, I'll pass an expression that returns true or false.

It's going to return true if the rating state is greater than the value

of i, the counter variable, and false if it's not.

So I'll pass it this.state.rating > i.

And based on that value, the star component will determine whether or

not to render a class attribute.

So now, in Star.js, I'll give the li a className attribute.

And I'll pass className a ternary expression that renders

the class selected if props.isSelected is true.

Otherwise lender null, or no class attribute.

And that should do it, let's test it out.

In the browser, I'll click the fourth star in one of the star rating components,

and see that it highlights the first four stars only.

In the DevTools elements inspector, you can see that all but

the fifth list item has the selected class applied, great.

Now, I'll select and change a few more ratings.

Naturally, these courses are all five star courses in my eyes.

But for this exercise, I want to set a variation of ratings for

the different courses.

That way, I can better test if and how the feature works.

And it works great.

To take things a bit further, I'm going to provide a way for users to deselect or

reset their star rating.

For example, if I give a course a one star rating,

there's no way to change it back to zero other than by refreshing the app.

So what I'll do is, in the handleSetRating function, add a conditional statement that

checks if the value of the updated rating state is the same as the previous value.

If it is, the rating state will reset to zero.

Inside handleSetRating, I'll write an if

else statement that says if this.state.rating

is strictly equal to the current rating value,

set the rating state to zero.

This.setState rating zero.

Else, set the rating to the value passed to the function.

Over in the browser, I'll click on a star to set a rating, let's say four stars.

If I click on the fourth star again, the rating resets to zero.

Click on one star, then click it again, and see it reset, good.

All right, I hope you were able to complete this React practice session

successfully.

If not, why not start over and

try to write it again without looking at my version.

You're also going to learn a whole lot more about working with React and

managing state as you progress through our React curriculum.

Thanks everyone, and happy learning.