How'd it go?

Were you able to create and display the star rating component?

Don't worry if you didn't complete everything, you can watch my solution,

compare it to what you wrote and then try to recreate it yourself.

The goal was to use react state to display a star rating

based on the stars the user clicks.

Now I'll show you my solution.

You can also reference my code when you download the project files.

The StarRating component will have internally controlled state.

Meaning each instance will manage its own state.

So first I'll initialize a rating state here in the StarRating class and

set it to zero by default.

Next, I'll write the function that renders the stars that make up

the StarRating component.

I'll create an error function named renderStars.

The max rating should be five stars.

So I'll need to render out five star components.

What I'll do as I hinted that in the previous video, is use a for

loop to push star components into an array based on a number of value.

Then render those stars to the dawn.

First, I'll assign an empty array to the variable stars.

We want five stars, so I'll declare a variable named maxRating and

assign it at the number value 5.

Next, I'll use a for loop to add star components to the stars array

based on the value of maxRating.

I'll define the condition for running the loop,

And as the block of code to run for each alteration I'll write stars.push.

Right at the top of the file,

I'll import the star component with import Star from /Star.

Then pass the push method, the Star component using a JSX tag.

Remember, since time rendering star components by iterating over

a value with a loop, I need to pass the star component a unique key.

I'll pass it the iterator or counter variable i as the value.

This will provide react away quickly and reliably identify a star in the list.

The renderStars function is going to return the stars array.

So below the for loop, I'll write return stars.

Keep in mind that React does not allow for loops in its render method.

So I had to create my stars in a separate function outside render.

Right so now in the render method, I'll use a JSX expression to call the render

stars function with this .renderstars and this will render the stars into the dawn.

Let's have a look in the browser.

Great, we see that five stars are being rendered for each course.

And if I change the maxRating value to 4, we see four stars.

The value 10 renders ten stars.

And so on.