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 solution to the challenge, starting with initializing state and rending the stars in the StarRating component.
Resources
How'd it go?
0:00
Were you able to create and
display the star rating component?
0:01
Don't worry if you didn't complete
everything, you can watch my solution,
0:04
compare it to what you wrote and
then try to recreate it yourself.
0:07
The goal was to use react
state to display a star rating
0:10
based on the stars the user clicks.
0:14
Now I'll show you my solution.
0:16
You can also reference my code when
you download the project files.
0:18
The StarRating component will
have internally controlled state.
0:21
Meaning each instance will
manage its own state.
0:25
So first I'll initialize a rating
state here in the StarRating class and
0:29
set it to zero by default.
0:34
Next, I'll write the function that
renders the stars that make up
0:37
the StarRating component.
0:40
I'll create an error
function named renderStars.
0:42
The max rating should be five stars.
0:49
So I'll need to render
out five star components.
0:51
What I'll do as I hinted that in
the previous video, is use a for
0:54
loop to push star components into
an array based on a number of value.
0:59
Then render those stars to the dawn.
1:03
First, I'll assign an empty
array to the variable stars.
1:06
We want five stars, so I'll declare
a variable named maxRating and
1:12
assign it at the number value 5.
1:16
Next, I'll use a for loop to add
star components to the stars array
1:21
based on the value of maxRating.
1:26
I'll define the condition for
running the loop,
1:29
And as the block of code to run for
each alteration I'll write stars.push.
1:40
Right at the top of the file,
1:49
I'll import the star component
with import Star from /Star.
1:52
Then pass the push method,
the Star component using a JSX tag.
2:02
Remember, since time rendering
star components by iterating over
2:09
a value with a loop, I need to pass
the star component a unique key.
2:14
I'll pass it the iterator or
counter variable i as the value.
2:18
This will provide react away quickly and
reliably identify a star in the list.
2:23
The renderStars function is
going to return the stars array.
2:29
So below the for loop,
I'll write return stars.
2:34
Keep in mind that React does not allow for
loops in its render method.
2:40
So I had to create my stars in
a separate function outside render.
2:44
Right so now in the render method, I'll
use a JSX expression to call the render
2:49
stars function with this .renderstars and
this will render the stars into the dawn.
2:54
Let's have a look in the browser.
3:02
Great, we see that five stars
are being rendered for each course.
3:05
And if I change the maxRating value to 4,
we see four stars.
3:09
The value 10 renders ten stars.
3:16
And so on.
3:19
You need to sign up for Treehouse in order to download course files.
Sign up