1
00:00:00,035 --> 00:00:01,473
How did it go?

2
00:00:01,473 --> 00:00:05,482
Are you able to create and
display the StarRating component?

3
00:00:05,482 --> 00:00:08,029
Don't worry if you didn't
complete everything.

4
00:00:08,029 --> 00:00:11,989
You can watch my solution,
compare it to what you wrote, and

5
00:00:11,989 --> 00:00:14,250
then try to recreate it yourself.

6
00:00:14,250 --> 00:00:19,171
The goal was to use React state
to display a star rating based on

7
00:00:19,171 --> 00:00:21,168
the stars a user clicks.

8
00:00:21,168 --> 00:00:23,812
Now I'll show you my solution.

9
00:00:23,812 --> 00:00:28,786
You can also reference my code when
you download the project files.

10
00:00:28,786 --> 00:00:32,584
I'll write a function that
renders the stars that make

11
00:00:32,584 --> 00:00:34,739
up the StarRating component.

12
00:00:34,739 --> 00:00:39,543
I'll create an arrow
function named renderStars.

13
00:00:39,543 --> 00:00:42,354
The max rating should be five stars.

14
00:00:42,354 --> 00:00:46,421
So I'll need a render out
five Star components.

15
00:00:46,421 --> 00:00:51,195
What I'll do as I hinted in
the previous video, is use a for

16
00:00:51,195 --> 00:00:56,556
loop to push star component into
an array based on a number value,

17
00:00:56,556 --> 00:00:59,496
then render those stars to the DOM.

18
00:01:01,540 --> 00:01:05,981
First assign an empty array
to the variable stars.

19
00:01:05,981 --> 00:01:10,507
We want five stars, so
I'll declare variable

20
00:01:10,507 --> 00:01:15,508
named maxRating and
assign it the number value 5.

21
00:01:15,508 --> 00:01:20,569
Next, I'll use a for
loop to add star components to

22
00:01:20,569 --> 00:01:25,406
the stars array based on
the value of maxRating.

23
00:01:25,406 --> 00:01:29,459
I'll define the condition for
running the loop.

24
00:01:29,459 --> 00:01:34,477
And as the block of code to run for
each iteration,

25
00:01:34,477 --> 00:01:38,432
I'll write stars.push, all right.

26
00:01:38,432 --> 00:01:42,724
At the top of the file,
I'll import the star

27
00:01:42,724 --> 00:01:47,480
component with import Star from './Star'.

28
00:01:47,480 --> 00:01:53,308
Then pass the push method to
the star component using a JSX tag.

29
00:01:58,273 --> 00:02:03,626
Remember, since I'm rendering
Star components by iterating

30
00:02:03,626 --> 00:02:10,091
over a value with a loop, I need to pass
the Star component a unique key prop.

31
00:02:10,091 --> 00:02:15,872
I'll pass it the iterator or
counter variable "i" as the value.

32
00:02:15,872 --> 00:02:22,995
This will provide React a way to quickly
and reliably identify a star in the list.

33
00:02:22,995 --> 00:02:27,599
The renderStars function is
going to return the stars array.

34
00:02:27,599 --> 00:02:33,559
So below the for loop,
I'll write, return stars.

35
00:02:33,559 --> 00:02:38,822
Keep in mind that React does not allow for
loops in its JSX.

36
00:02:38,822 --> 00:02:44,117
But it does accept an array of JSX tags,
so I had to create my

37
00:02:44,117 --> 00:02:49,645
stars in a separate function
outside the return statement.

38
00:02:49,645 --> 00:02:50,603
All right.

39
00:02:50,603 --> 00:02:55,995
So now in the return statement,
I'll use a JSX expression

40
00:02:55,995 --> 00:03:01,058
to call the renderStars
function with renderStars and

41
00:03:01,058 --> 00:03:04,812
this will render the stars into the DOM.

42
00:03:04,812 --> 00:03:07,229
Let's have a look in the browser.

43
00:03:07,229 --> 00:03:13,373
Great, we see that five stars
are being rendered for each course.

44
00:03:13,373 --> 00:03:19,032
If I change the maxRating value to 4,
we see four stars.

45
00:03:19,032 --> 00:03:22,729
The value 10,
renders ten stars, and so on.