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
This video covers one way to update the courseRating state based on the star a user clicks.
This video doesn't have any notes.
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
The StarRating component will
have internally controlled state,
0:00
meaning each instance will
manage its own state.
0:04
So first, I will initialize a courseRating
state here in the StarRating component and
0:08
set it to 0 by default, and
import the useState hook up top.
0:16
All right, now I'm going to write
the event handler that updates
0:24
the courseRating state based on the star,
a user clicks.
0:29
I'll call this function, handleSetRating.
0:34
And it will take the parameter rating for
the rating value.
0:38
Inside the function,
I'll update the courseRating state to
0:47
the rating value pass to
the function using setCourseRating.
0:52
I'll set the courseRating
to the parameter rating.
0:57
This function will be passed down
to each Star component via props,
1:01
and called when the user clicks on a star.
1:07
So in the renderStars function,
1:11
I'll give the Star component
a call back prop named setRating.
1:14
Then use an arrow function to pass
it a reference to handleSetRating.
1:19
I'm passing a function which will
be called when an onClick event
1:27
is triggered in the Star component.
1:32
When a user clicks on a star,
1:35
the value of the rating state should
update according to the star click.
1:37
For example,
if a user clicks the third star,
1:42
it will update the rating state to three,
1:46
the fourth star will update
the rating state to four, and so on.
1:49
To accomplish this,
1:54
I'll use the four loops counter
variable which acts like an index.
1:56
So I'll pass handleSetRating
the value of "i".
2:01
And since "i" begins at 0,
I'll need to add 1,
2:06
to make sure the rating state
is updated to the correct value.
2:10
So, i + 1.
2:15
Over in Stars.js,
I'll start by destructuring the props
2:18
in the Star component with curly braces,
setRating.
2:23
I'll give the li tag an onClick event
that calls the handleSetRating function
2:29
which is being passed via the setSating
prop each time a list item is clicked.
2:36
Okay, I'm gonna test what we've written so
far.
2:42
I'll open up React Dev Tools and
select one of the StarRating components.
2:46
Let's say the first one, I see that
its initial courseRating state is 0.
2:52
When I click on the first star,
the state updates to 1,
2:58
click on the second star, and
it updates the 2, and so on, good.
3:03
All right,
it looks like I'm almost finished.
3:09
Up next,
3:12
I'll add the selected styles to the stars
using conditional class rendering
3:12
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