Solution: Render the Stars

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