Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice State in React!
You have completed Practice State in React!
Preview
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