Preview
Video Player
00:00
00:00
Solution: Render the Stars
3:25This video covers one solution to the challenge, starting with rending the stars in the StarRating component.
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