‫Next up, let's actually create the stars
‫and make the component dynamic by reacting to a click event.
‫So let's create a brand new component here,
‫so function Star,
‫because the JSX code here
‫is actually going to be a bit complex.
‫But for now, we will want to return just the icon itself.
‫So I actually already included that icon hidden here
‫in the CSS file.
‫So if you scroll all the way down here,
‫you will find some code, here it is.
‫And so let's grab all of this comment,
‫so all the way until the end,
‫cut it from here,
‫and paste it down here.
‫Then we can close the sidebar and this one.
‫And so here, we have the star icon as an SVG.
‫So let's start here with the full star,
‫so just this SVG,
‫copy that and paste it here,
‫and then let's use that star here.
‫So instead of this, we will simply include the star.
‫And then let's also define the key prop.,
‫and let's simply use i,
‫so the current index, which is not ideal,
‫but at least then React doesn't complain anymore.
‫Give it a save, and nothing is happening here.
‫Let's try that again, and let's inspect what we have here.
‫So I was not expecting this,
‫so we have indeed our stars here,
‫but they appear to not have any height.
‫And so let's try to fix that right here.
‫So I will just wrap this SVG into a span element.
‫Let's cut it from here, place it at the end,
‫and then I will again define some style object out here.
‫So let's say const starStyle equals,
‫so width, let's say, 48 pixels.
‫And let's do the same for the height.
‫Let's give it a display of block property as well
‫and setting the cursor to a pointer
‫so that they behave a bit like a button.
‫And so then we should also define the role property here
‫for accessibility.
‫So this is just HTML for accessibility,
‫it has nothing to do with React.
‫Okay, and then our starStyle.
‫And there we go.
‫So now we have all nice stars.
‫Now they might be a bit too big here,
‫but we will later allow the user to set the size.
‫I'm just noticing
‫that we have maybe enough space between them,
‫and so let's remove this gap right here.
‫Great, now let's actually make our component dynamic,
‫meaning that whenever we click on one of these stars,
‫we then want to display the current rating
‫here in this paragraph element.
‫So since we now want the UI to re-render based on an event,
‫so we want something to happen on the screen, we need state.
‫So let's create a new state variable called rating,
‫of course, by using useState.
‫And by default, let's set it to 0.
‫Okay, next, let's use that state.
‫So as a second step, we include the rating prop right here.
‫And so then we see 0.
‫While that's maybe not so ideal,
‫because if the rating is still 0,
‫that simply doesn't mean
‫that the user hasn't basically rated yet,
‫so they haven't done anything.
‫And so here, let's say that we either want the rating
‫or an empty string.
‫And so thanks to short circuiting,
‫we will then move here to the second part of the operator
‫whenever this is a falsy value.
‫But of course, if we had 1 here,
‫then we would see that 1.
‫Now maybe just to clear the confusion a bit,
‫let's remove these other two star ratings here,
‫so working with just one.
‫And so where do we now need to listen for the click events?
‫So, basically, when the user clicks here,
‫then the rating should become 1.
‫If they click here, then it should become 2, 3, 4, and 5.
‫So what this means
‫is that we need to listen for the click event
‫on each of these stars.
‫So let's start by defining a onClick prop here,
‫which we will then later receive inside the star.
‫So here we will now define a function
‫which will actually set the rating.
‫So let's say setRating,
‫and then whatever the current index is, plus 1,
‫because remember that array indexes start at 0,
‫but our rating should start at 1.
‫Okay, so now, of course, nothing will happen right now,
‫because we actually need to listen for that event
‫on an HTML element,
‫so like a JSX element.
‫So what that means
‫is that here we need to now accept that onClick handler,
‫so this function that we defined right here,
‫and then use the onClick prop right here
‫to then actually listen for the event and react to it.
‫And if this is a bit confusing,
‫then let's maybe change the name here
‫from onClick to onRate.
‫And so then it becomes really obvious
‫that this is actually our own prop.
‫So this is our own handler function,
‫and we could, of course, even have created that separately.
‫So onClick should be onRate.
‫And so this is basically
‫what we have been doing all the time,
‫which is to pass an event handler function
‫from the component that owns the state, so this one,
‫right into a component
‫that wants to actually update that state.
‫So in this case, that's star.
‫So we can make that even more explicit if we want.
‫So we can say function handleRate or handleRating maybe,
‫and then here we accept a rating,
‫and all we do is then setRating,
‫well, to that rating that we receive.
‫And then here we can use that handle rating function.
‫And so with this, we created a similar pattern
‫to what we have done all the time.
‫So creating a handler function
‫in the component that owns the state
‫and then passing that handler function
‫into some other child component
‫which will actually update the state.
‫Now here we are actually passing this function here,
‫so not just this one,
‫because here we need to fix the value of the rating
‫that we want to be set for each star.
‫Okay, that was a lot of explanation,
‫let's just reload here.
‫And now as I click,
‫you see that the state does indeed update.
‫All right, so that's already working.
‫And yeah, if this was a bit difficult for you to understand,
‫then you can, as always, just pause the video here
‫and analyze the code on your own.
‫So what we did here is actually a bit similar
‫to what we did in previous exercises.
‫For example, I think, in the accordion exercise,
‫we did something very similar.
‫Okay, and now to finish,
‫what I want to do
‫is to display only the amount of stars
‫equal to the rating in full
‫and all the other stars empty,
‫so just like here.
‫So here, if I click on the 5,
‫then you see that 5 stars are full
‫and the other ones are empty.
‫And so here, let's now quickly do exactly the same thing.
‫So we already have that other empty star right here.
‫And so now we want to basically conditionally render
‫either the full or the empty star.
‫So let's grab this here,
‫let's cut it, actually.
‫And then here, let's enter JavaScript mode.
‫So we will want to have a prop here for the star
‫that says if this star is full.
‫So we will take care of that later.
‫But for now, let's just say, if the star is full,
‫then render this part, so that SVG element,
‫and if not, then render this one.
‫All right, and so now, of course, full is undefined
‫because we are not passing it in,
‫and therefore, all of the stars are empty right now.
‫So how do we define whether a star is full or not?
‫Well, it's actually pretty simple.
‫So full should basically be a true or false value, right?
‫That's why this conditional rendering here works.
‫So again, when full is true, then this one will be rendered.
‫And if it's false, than the empty star.
‫So here we just want to now write a condition basically
‫that will always be either true or false.
‫So all we have to do is to say,
‫"Is the current rating greater or equal i + 1?"
‫Which is always the rating
‫for the currently generated star.
‫And you see, that immediately, that worked here.
‫Great, so let's again see why this actually works.
‫So it all starts with this i variable right here.
‫And so this comes from the index of the empty array
‫that we create here with the length of maxRating.
‫So we create that array
‫and then we immediately loop over it.
‫And so then the first star that we create has the number 0.
‫So this one is star 0, 1, 2, 3, and 4.
‫We then use that index in order to handle our rating.
‫So if we click on the very first star here,
‫it will be 0 + 1, and so it becomes 1.
‫If we click on the third star here,
‫well, then here the index is 2,
‫and then 2 plus 1 makes 3.
‫And so then the rating, as we see, is set to 3.
‫And then in order to determine
‫whether a star is full or not,
‫all we need to do is to compare the currently set rating
‫to the index of the current star.
‫So here the index is 0 + 1.
‫So here it's 1, here it's 2,
‫here it's 3, 4, and 5.
‫And so right now, our rating is 3.
‫And so here, of course, that 3 is greater than 1.
‫Here, it's greater than 2.
‫Here it's greater or equal 3, and so it's still true,
‫but then here,
‫it's, of course, false.
‫So 3 is not greater or equal 4,
‫and therefore, this one here is then not full.
‫So this condition will return false,
‫which will then make the star being rendered as empty.
‫Okay, so hopefully, that made sense.
‫And indeed, our component is now already almost working.
‫All that is missing
‫is this functionality of hovering the stars.
‫And so let's take care of that in the next lecture.