Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Highlight the selected stars by conditionally rendering a class attribute.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In this video, I'll display the selected
stars highlighted with a dark blue
0:00
fill color by conditionally rendering
a class attribute for a list item.
0:05
When a user clicks on a star, each star,
up to the one that was clicked,
0:11
should be selected or highlighted by
changing its fill color with CSS.
0:16
In index.css,
I included a rule that targets a star
0:22
SVG inside an element with
the class selected and
0:27
changes its fill color to
a darker shade of blue.
0:32
This could be achieved
several different ways.
0:37
What I'll do is pass a prop to
the Star component named isSelected.
0:41
As the value, I'll pass an expression
that returns true or false.
0:47
It's going to return true if
the CourseRating state is greater
0:52
than the value of i, the counter variable.
0:57
And false, if it's not.
1:01
So I'll pass it,
courseRating greater than i.
1:03
And based on that value, the Star
component will determine whether or
1:09
not to render a class attribute.
1:14
So now in Stars.js,
1:18
I'll destructure the isSelected prop here.
1:20
I'll give the li tag
a className attribute, and
1:26
I'll pass className a ternary
expression that renders
1:30
the class selected if
the prop isSelected is true.
1:35
Otherwise, render null or
no class attribute.
1:39
And that should do it.
1:43
Let's test it out.
1:45
In the browser, I'll click the fourth
star in one of the StarRating
1:48
components and see that it highlights
the first four stars only.
1:53
In the dev tools elements inspector,
you can see that all but
1:58
the fifth list item has
the selected class applied.
2:03
Great, now select and
change a few more ratings.
2:08
I wanna set a variation of ratings for
the different courses.
2:12
That way, I can better test if and
how the feature works.
2:17
That's it for
the practice sessions requirements.
2:22
Hopefully, you are able to come up
with a solution similar to mine.
2:24
To take things a little bit further,
I'm going to provide a way for
2:29
users to deselect or
reset their star rating.
2:33
For example,
if I give a course a one star rating,
2:38
there's no way to change it back to
zero other than by refreshing the app.
2:42
What I'll do is, in the handleSetRating
function, add a conditional statement that
2:48
checks if the value of the updated rating
state is the same as the previous value.
2:54
If it is,
the rating state will reset to zero.
3:00
Inside handleSetRating,
write an if else statement that says,
3:04
if courseRating is strictly equal
to the current rating value,
3:09
set the rating state to 0.
3:15
Else, set rating to the value
passed to the function.
3:17
Over in the browser, I'll click on a star
to set a rating, let's say four stars.
3:25
If I click on the fourth star again,
the rating resets to zero.
3:32
Click on one star,
then click it again and see it resets.
3:37
Good, all right,
I hope you are able to complete this React
3:42
practice session successfully.
3:46
If not, why not start over and
3:49
try to write it again without
looking at my version?
3:52
You're also going to learn a whole
lot more about working with React and
3:56
managing state as you progress
through our React curriculum.
4:01
Thanks everyone and happy learning.
4:06
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up