WEBVTT 00:02.330 --> 00:02.720 Okay. 00:02.720 --> 00:08.180 So our application is displaying an average rating now for the movie. 00:08.180 --> 00:14.840 But what we need to do is we need to also allow users to rate that movie from our UI. 00:14.870 --> 00:16.070 And how are we going to do that? 00:16.400 --> 00:23.390 Of course, it's multiple ways how we can do that, but what we will do is we will use a similar system 00:23.390 --> 00:27.470 with our stars to make the rating. 00:27.470 --> 00:32.240 So let's go back to our application and we could use something similar like that. 00:32.240 --> 00:35.810 But I don't like repeating myself over and over. 00:35.840 --> 00:38.510 And I will show you another way how we can do that. 00:38.510 --> 00:46.070 So what I will do is I will put another H1 here and I will say rating movie. 00:46.610 --> 00:49.460 And inside here we can create a div. 00:50.060 --> 00:57.770 And inside the div we can put some headings though I could repeat five times. 00:57.770 --> 01:00.770 But I will show you another way how we can automate this. 01:00.770 --> 01:02.450 So I'll do curly braces. 01:02.480 --> 01:05.190 And we know that we want to repeat something five times. 01:05.190 --> 01:10.770 So I will create an array here, but I want to populate it with five items. 01:10.770 --> 01:12.720 So what you can do is spread operator. 01:12.720 --> 01:14.880 And I will do array and five. 01:14.910 --> 01:23.160 That means array five will create five empty elements and it will spread it into that array. 01:23.160 --> 01:28.170 And from here I can do map and I can use the map as we've done it before. 01:28.170 --> 01:31.470 So map will create an arrow function. 01:31.500 --> 01:35.370 And that arrow function will need to return something. 01:35.370 --> 01:37.230 And I will return that in a second. 01:37.230 --> 01:43.290 So what we will get from the arrow function we will have element and that will be something that we 01:43.290 --> 01:44.010 will loop through. 01:44.010 --> 01:48.930 And also we will need index here which element we are looping through here. 01:48.930 --> 01:59.070 So if I will take this and I can return, return this icon. 01:59.070 --> 02:01.260 If I will save it now I can go here. 02:01.260 --> 02:06.270 You can see here I have five icons because we repeat it five times already. 02:06.270 --> 02:06.750 This. 02:06.750 --> 02:09.620 So this is already working our map. 02:09.620 --> 02:11.090 Their first thing first. 02:11.090 --> 02:13.400 I don't want to have this as an orange. 02:13.400 --> 02:20.090 And maybe I can change it for purple just to distinguish in between the average rating and the user 02:20.090 --> 02:21.920 rating as we will have it here. 02:21.920 --> 02:24.890 So that's one thing that we have. 02:24.920 --> 02:31.100 Another thing is we can also have that class flex and just to put them next to each other. 02:31.100 --> 02:34.880 So if I will go here you can see here we have five. 02:34.940 --> 02:37.730 At the moment this is based on the same average rating. 02:37.730 --> 02:44.900 So if I will go um and here well at the moment it's kind of based on the average rating. 02:44.900 --> 02:46.250 But we don't have that. 02:46.370 --> 02:48.410 It's repeated five times over. 02:48.410 --> 02:52.760 So it's always when the rating is above zero it will be purple. 02:52.760 --> 02:56.750 What we want to do is we want to that being based on something else. 02:56.750 --> 02:59.930 So we will create a new variable and actually we'll store it in state. 02:59.930 --> 03:09.230 So constant and I will say highlighted and set high lighted. 03:10.050 --> 03:17.730 So basically this will be our youth state and by default I will put it minus one. 03:17.730 --> 03:21.090 So I will have a new variable which is going to be a number. 03:21.090 --> 03:23.520 And that will be minus one at default. 03:23.520 --> 03:25.770 And I will have a method to update this. 03:25.770 --> 03:30.540 So if I will have that highlighted I can use it to color code this. 03:30.540 --> 03:37.500 So if I will say if highlighted is bigger but it's not zero as we had it here numbers it. 03:37.500 --> 03:39.630 We can use this index from here. 03:39.630 --> 03:47.340 So if highlighted is bigger than index and at the moment is minus one then we will use that purple. 03:47.340 --> 03:51.660 So if I will save it and go back here you see nothing is highlighted. 03:51.660 --> 04:00.210 So if I will go back again here and I will do let's say two and you see two is highlighted. 04:00.210 --> 04:07.950 So basically this is how it works now and which with the highlight highlighting things but we still 04:07.950 --> 04:10.260 have it this hard coded here. 04:10.260 --> 04:12.000 So I will change it for minus one. 04:12.000 --> 04:17.140 This is what we want to start with, not in this highlighted, but we can actually attach some mouse 04:17.140 --> 04:18.100 events to it. 04:18.100 --> 04:23.320 So I can do on mouse enter. 04:23.350 --> 04:30.310 That means when a mouse enter that element and I can do an arrow function here. 04:30.310 --> 04:32.050 So that will be mouse event here. 04:32.050 --> 04:36.760 And what I can do is I can use this set. 04:36.790 --> 04:39.700 Set highlighted method to trigger from here. 04:39.700 --> 04:41.020 So set highlighted method. 04:41.020 --> 04:44.290 And what I want to do is set I want to send index. 04:44.320 --> 04:47.560 Actually I need to offset that by one. 04:47.560 --> 04:49.240 So index is starting from zero. 04:49.270 --> 04:56.230 I want to have like plus one just to set it for a proper index there. 04:56.230 --> 05:02.230 But also what I can do is on mouse leave. 05:02.650 --> 05:08.680 I can use the same method here to reset back to minus one. 05:11.050 --> 05:13.840 So if I will go back to my application. 05:15.560 --> 05:15.950 Hey. 05:15.950 --> 05:16.550 This is. 05:16.700 --> 05:18.710 This is causing too many rerenders. 05:18.710 --> 05:20.210 That means it is a loop. 05:20.210 --> 05:21.740 So it's changed the state. 05:21.770 --> 05:24.770 State renders this and it rerenders. 05:24.770 --> 05:25.190 And it's. 05:25.430 --> 05:26.840 That's why it's complaining about. 05:26.840 --> 05:29.150 And the reason why I have it here. 05:29.150 --> 05:33.350 Because I forgot to put it actually on Mousley. 05:33.380 --> 05:36.560 If you see that arrow function, I had it here. 05:36.560 --> 05:38.480 I haven't done it here. 05:38.480 --> 05:45.440 So basically this first, this first one is an arrow event, a mouse event. 05:45.440 --> 05:47.780 So this will be trigger. 05:47.780 --> 05:49.130 And then we trigger this one. 05:49.130 --> 05:55.970 And that will prevent this from kind of looking each other if I will won't have it like that without 05:55.970 --> 05:57.890 this this will change the state. 05:57.920 --> 06:01.850 The state will rerender this, this will change the state rerender and so on. 06:01.850 --> 06:03.200 So it will go forever. 06:03.200 --> 06:09.620 If I will have this, this will kind of stop it because I will have I will trigger the mouse event and 06:09.620 --> 06:11.840 that will trigger the attention state. 06:11.990 --> 06:14.090 Otherwise it will complain about this. 06:14.090 --> 06:15.830 And you can see here that that's now. 06:15.860 --> 06:16.850 And now it's fixed. 06:16.880 --> 06:23.290 So if I click on here, if I start to hover, you can see I have that effect here. 06:23.290 --> 06:27.790 So 1543. 06:27.790 --> 06:29.170 And I can also do that. 06:29.170 --> 06:38.110 So basically what I'm doing here is I'm sending this highlighted index plus one because that will start 06:38.110 --> 06:39.010 from zero. 06:39.010 --> 06:41.620 And that will start in this state. 06:41.650 --> 06:44.020 At the beginning we have minus one. 06:44.020 --> 06:48.880 And based on that highlighted if it's bigger than index then we will do that. 06:48.880 --> 06:49.360 Purple. 06:49.390 --> 06:55.960 Maybe we can do purple 500 to be more vivid or even six and 100. 06:55.960 --> 06:58.420 So this will be center. 06:58.420 --> 07:01.540 And if we leave that mouse we'll set it to minus one. 07:01.540 --> 07:06.430 So if I go go here you can see here it is working and fine. 07:06.430 --> 07:13.090 So this is an already working like this in the next video, maybe we should spend a little bit more 07:13.090 --> 07:15.430 time just to make it a little bit more styled. 07:15.430 --> 07:18.610 And because it's everything start to blend with each other. 07:18.610 --> 07:22.270 So we'll spend a little bit of time putting some styles in place.