‫Let's now handle the event of users
‫hovering over our stars.
‫So basically the functionality that we're looking
‫for is this one.
‫So whenever we hover over these stars
‫we get like a temporary rating here exactly
‫with the number of stars that are currently being hovered.
‫So here we have nine, well, here we have three
‫but it is completely independent
‫from the rating that is actually set right now.
‫So the rating is set to five, but again
‫whenever we hover over some other number of stars
‫then that temporarily changes to that rating now, right?
‫So what that means is that now we need a brand new piece
‫of state to basically store that temporary rating.
‫And again, that makes sense
‫because something should happen on the screen.
‫So the component should re-render whenever
‫there is some hover event.
‫That's how we then get that new rating in there.
‫So let's say,
‫(keyboard clicking)
‫for example, temp rating
‫which stands for temporary, and then set
‫temp rating.
‫And we start at zero.
‫And of course the rating itself should also start at zero.
‫Now, right.
‫Now, in order to actually handle that hover event,
‫let's go down here onto our star.
‫So into our star component.
‫And then where we handle the click
‫is where we also handle the hover.
‫Now, there's not really a hover event
‫but instead we have on mouse enter.
‫So let's just do some console log lock here for now.
‫So that's one of them.
‫And then we have mouse leave.
‫So we basically need to handle these two separately.
‫(keyboard clicking)
‫Okay, just so that we can quickly see.
‫So I entered basically this element, and then it said enter.
‫And immediately afterwards it said leave.
‫So let's see again.
‫And indeed, each time that we enter or leave,
‫well we get our log down there.
‫And so now all we have to do is to update that
‫temp rating state that we just created
‫in each of these situations.
‫So let's pass in then two handler functions here
‫into the star, just like we did for the on rate.
‫So let's call this one here on hover in.
‫And the prop name here is different again
‫from the event name, just to avoid some confusion here.
‫So we could also call this prop on mouse Enter again,
‫but then it might be a bit confusing and you might think
‫that the event is actually handled right here
‫on the star component, which of course is not possible.
‫So the event always needs to be handled
‫on a JSX element itself.
‫So like an HTML element such as a span.
‫Now Okay.
‫And now all we have to do here is to basically
‫set the temp rating to the rating of the current star.
‫So that's again, I plus one, right?
‫And then on hover out, we set it back to the initial value.
‫So temp rating back to zero.
‫So here we need to change the name.
‫So of course this is with an upper case R.
‫And now all we need to do is to accept these two props here
‫and wire everything together.
‫So, on hover in
‫on hover out.
‫Alright? And so then here
‫we of course want to now call these functions.
‫And here
‫on hover out.
‫And now finally
‫we need to actually display this rating in the UI.
‫So you see here right now that it's still yellow
‫which means that we haven't used it anywhere.
‫So let's, for now, replace this rating with the temp rating.
‫And then let's see,
‫and yeah, that's already working.
‫So see how that value was there shortly.
‫We had the three,
‫then here the four, the five
‫and so on and so forth.
‫So that's working great.
‫The only part that is not working
‫is that the stars are not getting full.
‫And so let's quickly fix that
‫here inside this condition here.
‫So here we can say that if there is a temp rating.
‫So if there is a temporary rating
‫then do the same thing,
‫but with that temp rating.
‫So then temp rating, greater or equal I plus one.
‫But if not, well then we just do what we had before.
‫And so this should fix that and yeah, beautiful.
‫So that works great.
‫And if we click here,
‫well then the number disappears,
‫but the stars stay the same.
‫And so that's because now we have the rating set.
‫And then, so here in this full prop
‫we enter the second branch,
‫which then just like before
‫sets these four stars here, two full.
‫Now all we have to do here is to place another
‫or here and say basically
‫if there is no temp rating, then display the current rating.
‫And if that also doesn't exist
‫well then we get the empty string.
‫So indeed, we now get four.
‫If we click again, we get five.
‫But as we hover, we get the temporary rating.
‫So just like we wanted
‫and just like this component here works as well.
‫So this looks really nice, really real world actually
‫and it wasn't that much work.
‫All we had to do is some tricks
‫with these two rating states.
‫And then handling all of these different events.
‫So basically handling the click, the mouse enter
‫and the mouse leave.
‫And the result, if you ask me,
‫is even a bit magical here.
‫So I really, really like this effect that we created here.
‫Okay.
‫And so that's the main functionality already implemented.
‫But now let's make the component really
‫really flexible by allowing a couple of props.
‫So we will learn all about that in the next lecture
‫and then we will come back here
‫and create the API basically of this component.