Okay.
So our application is displaying an average rating now for the movie.
But what we need to do is we need to also allow users to rate that movie from our UI.
And how are we going to do that?
Of course, it's multiple ways how we can do that, but what we will do is we will use a similar system
with our stars to make the rating.
So let's go back to our application and we could use something similar like that.
But I don't like repeating myself over and over.
And I will show you another way how we can do that.
So what I will do is I will put another H1 here and I will say rating movie.
And inside here we can create a div.
And inside the div we can put some headings though I could repeat five times.
But I will show you another way how we can automate this.
So I'll do curly braces.
And we know that we want to repeat something five times.
So I will create an array here, but I want to populate it with five items.
So what you can do is spread operator.
And I will do array and five.
That means array five will create five empty elements and it will spread it into that array.
And from here I can do map and I can use the map as we've done it before.
So map will create an arrow function.
And that arrow function will need to return something.
And I will return that in a second.
So what we will get from the arrow function we will have element and that will be something that we
will loop through.
And also we will need index here which element we are looping through here.
So if I will take this and I can return, return this icon.
If I will save it now I can go here.
You can see here I have five icons because we repeat it five times already.
This.
So this is already working our map.
Their first thing first.
I don't want to have this as an orange.
And maybe I can change it for purple just to distinguish in between the average rating and the user
rating as we will have it here.
So that's one thing that we have.
Another thing is we can also have that class flex and just to put them next to each other.
So if I will go here you can see here we have five.
At the moment this is based on the same average rating.
So if I will go um and here well at the moment it's kind of based on the average rating.
But we don't have that.
It's repeated five times over.
So it's always when the rating is above zero it will be purple.
What we want to do is we want to that being based on something else.
So we will create a new variable and actually we'll store it in state.
So constant and I will say highlighted and set high lighted.
So basically this will be our youth state and by default I will put it minus one.
So I will have a new variable which is going to be a number.
And that will be minus one at default.
And I will have a method to update this.
So if I will have that highlighted I can use it to color code this.
So if I will say if highlighted is bigger but it's not zero as we had it here numbers it.
We can use this index from here.
So if highlighted is bigger than index and at the moment is minus one then we will use that purple.
So if I will save it and go back here you see nothing is highlighted.
So if I will go back again here and I will do let's say two and you see two is highlighted.
So basically this is how it works now and which with the highlight highlighting things but we still
have it this hard coded here.
So I will change it for minus one.
This is what we want to start with, not in this highlighted, but we can actually attach some mouse
events to it.
So I can do on mouse enter.
That means when a mouse enter that element and I can do an arrow function here.
So that will be mouse event here.
And what I can do is I can use this set.
Set highlighted method to trigger from here.
So set highlighted method.
And what I want to do is set I want to send index.
Actually I need to offset that by one.
So index is starting from zero.
I want to have like plus one just to set it for a proper index there.
But also what I can do is on mouse leave.
I can use the same method here to reset back to minus one.
So if I will go back to my application.
Hey.
This is.
This is causing too many rerenders.
That means it is a loop.
So it's changed the state.
State renders this and it rerenders.
And it's.
That's why it's complaining about.
And the reason why I have it here.
Because I forgot to put it actually on Mousley.
If you see that arrow function, I had it here.
I haven't done it here.
So basically this first, this first one is an arrow event, a mouse event.
So this will be trigger.
And then we trigger this one.
And that will prevent this from kind of looking each other if I will won't have it like that without
this this will change the state.
The state will rerender this, this will change the state rerender and so on.
So it will go forever.
If I will have this, this will kind of stop it because I will have I will trigger the mouse event and
that will trigger the attention state.
Otherwise it will complain about this.
And you can see here that that's now.
And now it's fixed.
So if I click on here, if I start to hover, you can see I have that effect here.
So 1543.
And I can also do that.
So basically what I'm doing here is I'm sending this highlighted index plus one because that will start
from zero.
And that will start in this state.
At the beginning we have minus one.
And based on that highlighted if it's bigger than index then we will do that.
Purple.
Maybe we can do purple 500 to be more vivid or even six and 100.
So this will be center.
And if we leave that mouse we'll set it to minus one.
So if I go go here you can see here it is working and fine.
So this is an already working like this in the next video, maybe we should spend a little bit more
time just to make it a little bit more styled.
And because it's everything start to blend with each other.
So we'll spend a little bit of time putting some styles in place.