Solution: Select Stars Based on Rating

In this video, I'll display the selected stars highlighted with a dark blue fill 0:00 color by conditionally rendering a class attribute for a list item. 0:04 When a user clicks on a star, each star up to the one that was clicked 0:09 should be selected or highlighted by changing its fill color with CSS. 0:13 In index.css, I included a rule that targets a star SVG inside an element with 0:18 the class selected, and changes its fill color to a darker shade of blue. 0:23 This could be achieved several different ways. 0:27 What I'll do is pass a prop to the star component named isSelected. 0:30 As the value, I'll pass an expression that returns true or false. 0:38 It's going to return true if the rating state is greater than the value 0:43 of i, the counter variable, and false if it's not. 0:48 So I'll pass it this.state.rating > i. 0:53 And based on that value, the star component will determine whether or 1:01 not to render a class attribute. 1:04 So now, in Star.js, I'll give the li a className attribute. 1:07 And I'll pass className a ternary expression that renders 1:16 the class selected if props.isSelected is true. 1:21 Otherwise lender null, or no class attribute. 1:28 And that should do it, let's test it out. 1:34 In the browser, I'll click the fourth star in one of the star rating components, 1:37 and see that it highlights the first four stars only. 1:42 In the DevTools elements inspector, you can see that all but 1:47 the fifth list item has the selected class applied, great. 1:52 Now, I'll select and change a few more ratings. 1:59 Naturally, these courses are all five star courses in my eyes. 2:02 But for this exercise, I want to set a variation of ratings for 2:05 the different courses. 2:08 That way, I can better test if and how the feature works. 2:10 And it works great. 2:16 To take things a bit further, I'm going to provide a way for users to deselect or 2:19 reset their star rating. 2:23 For example, if I give a course a one star rating, 2:25 there's no way to change it back to zero other than by refreshing the app. 2:28 So what I'll do is, in the handleSetRating function, add a conditional statement that 2:33 checks if the value of the updated rating state is the same as the previous value. 2:39 If it is, the rating state will reset to zero. 2:44 Inside handleSetRating, I'll write an if 2:48 else statement that says if this.state.rating 2:53 is strictly equal to the current rating value, 2:59 set the rating state to zero. 3:04 This.setState rating zero. 3:08 Else, set the rating to the value passed to the function. 3:15 Over in the browser, I'll click on a star to set a rating, let's say four stars. 3:26 If I click on the fourth star again, the rating resets to zero. 3:33 Click on one star, then click it again, and see it reset, good. 3:38 All right, I hope you were able to complete this React practice session 3:43 successfully. 3:46 If not, why not start over and 3:47 try to write it again without looking at my version. 3:49 You're also going to learn a whole lot more about working with React and 3:51 managing state as you progress through our React curriculum. 3:55 Thanks everyone, and happy learning. 3:59