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 rending the stars in the StarRating component.
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
How did it go?
0:00
Are you able to create and
display the StarRating component?
0:01
Don't worry if you didn't
complete everything.
0:05
You can watch my solution,
compare it to what you wrote, and
0:08
then try to recreate it yourself.
0:11
The goal was to use React state
to display a star rating based on
0:14
the stars a user clicks.
0:19
Now I'll show you my solution.
0:21
You can also reference my code when
you download the project files.
0:23
I'll write a function that
renders the stars that make
0:28
up the StarRating component.
0:32
I'll create an arrow
function named renderStars.
0:34
The max rating should be five stars.
0:39
So I'll need a render out
five Star components.
0:42
What I'll do as I hinted in
the previous video, is use a for
0:46
loop to push star component into
an array based on a number value,
0:51
then render those stars to the DOM.
0:56
First assign an empty array
to the variable stars.
1:01
We want five stars, so
I'll declare variable
1:05
named maxRating and
assign it the number value 5.
1:10
Next, I'll use a for
loop to add star components to
1:15
the stars array based on
the value of maxRating.
1:20
I'll define the condition for
running the loop.
1:25
And as the block of code to run for
each iteration,
1:29
I'll write stars.push, all right.
1:34
At the top of the file,
I'll import the star
1:38
component with import Star from './Star'.
1:42
Then pass the push method to
the star component using a JSX tag.
1:47
Remember, since I'm rendering
Star components by iterating
1:58
over a value with a loop, I need to pass
the Star component a unique key prop.
2:03
I'll pass it the iterator or
counter variable "i" as the value.
2:10
This will provide React a way to quickly
and reliably identify a star in the list.
2:15
The renderStars function is
going to return the stars array.
2:22
So below the for loop,
I'll write, return stars.
2:27
Keep in mind that React does not allow for
loops in its JSX.
2:33
But it does accept an array of JSX tags,
so I had to create my
2:38
stars in a separate function
outside the return statement.
2:44
All right.
2:49
So now in the return statement,
I'll use a JSX expression
2:50
to call the renderStars
function with renderStars and
2:55
this will render the stars into the DOM.
3:01
Let's have a look in the browser.
3:04
Great, we see that five stars
are being rendered for each course.
3:07
If I change the maxRating value to 4,
we see four stars.
3:13
The value 10,
renders ten stars, and so on.
3:19
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