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
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
You need to sign up for Treehouse in order to download course files.
Sign up