1 00:00:01,110 --> 00:00:04,410 ‫Next up, let's actually create the stars 2 00:00:04,410 --> 00:00:09,303 ‫and make the component dynamic by reacting to a click event. 3 00:00:11,370 --> 00:00:15,330 ‫So let's create a brand new component here, 4 00:00:15,330 --> 00:00:17,643 ‫so function Star, 5 00:00:19,380 --> 00:00:21,330 ‫because the JSX code here 6 00:00:21,330 --> 00:00:23,523 ‫is actually going to be a bit complex. 7 00:00:25,110 --> 00:00:29,073 ‫But for now, we will want to return just the icon itself. 8 00:00:30,030 --> 00:00:34,710 ‫So I actually already included that icon hidden here 9 00:00:34,710 --> 00:00:36,213 ‫in the CSS file. 10 00:00:37,380 --> 00:00:39,780 ‫So if you scroll all the way down here, 11 00:00:39,780 --> 00:00:44,780 ‫you will find some code, here it is. 12 00:00:45,090 --> 00:00:49,260 ‫And so let's grab all of this comment, 13 00:00:49,260 --> 00:00:51,150 ‫so all the way until the end, 14 00:00:51,150 --> 00:00:53,040 ‫cut it from here, 15 00:00:53,040 --> 00:00:55,443 ‫and paste it down here. 16 00:00:56,370 --> 00:00:59,403 ‫Then we can close the sidebar and this one. 17 00:01:00,270 --> 00:01:04,473 ‫And so here, we have the star icon as an SVG. 18 00:01:05,910 --> 00:01:09,960 ‫So let's start here with the full star, 19 00:01:09,960 --> 00:01:11,583 ‫so just this SVG, 20 00:01:13,620 --> 00:01:16,560 ‫copy that and paste it here, 21 00:01:16,560 --> 00:01:19,353 ‫and then let's use that star here. 22 00:01:20,520 --> 00:01:25,520 ‫So instead of this, we will simply include the star. 23 00:01:27,390 --> 00:01:29,760 ‫And then let's also define the key prop., 24 00:01:29,760 --> 00:01:32,010 ‫and let's simply use i, 25 00:01:32,010 --> 00:01:34,740 ‫so the current index, which is not ideal, 26 00:01:34,740 --> 00:01:37,713 ‫but at least then React doesn't complain anymore. 27 00:01:38,550 --> 00:01:42,330 ‫Give it a save, and nothing is happening here. 28 00:01:42,330 --> 00:01:47,223 ‫Let's try that again, and let's inspect what we have here. 29 00:01:48,990 --> 00:01:50,883 ‫So I was not expecting this, 30 00:01:53,400 --> 00:01:57,150 ‫so we have indeed our stars here, 31 00:01:57,150 --> 00:01:59,760 ‫but they appear to not have any height. 32 00:01:59,760 --> 00:02:02,343 ‫And so let's try to fix that right here. 33 00:02:03,330 --> 00:02:08,260 ‫So I will just wrap this SVG into a span element. 34 00:02:10,980 --> 00:02:14,823 ‫Let's cut it from here, place it at the end, 35 00:02:16,260 --> 00:02:21,260 ‫and then I will again define some style object out here. 36 00:02:22,350 --> 00:02:27,350 ‫So let's say const starStyle equals, 37 00:02:28,680 --> 00:02:32,943 ‫so width, let's say, 48 pixels. 38 00:02:34,170 --> 00:02:36,513 ‫And let's do the same for the height. 39 00:02:37,980 --> 00:02:42,980 ‫Let's give it a display of block property as well 40 00:02:43,260 --> 00:02:46,800 ‫and setting the cursor to a pointer 41 00:02:46,800 --> 00:02:49,413 ‫so that they behave a bit like a button. 42 00:02:51,690 --> 00:02:56,340 ‫And so then we should also define the role property here 43 00:02:56,340 --> 00:02:57,663 ‫for accessibility. 44 00:02:59,280 --> 00:03:02,370 ‫So this is just HTML for accessibility, 45 00:03:02,370 --> 00:03:04,113 ‫it has nothing to do with React. 46 00:03:06,300 --> 00:03:09,003 ‫Okay, and then our starStyle. 47 00:03:10,830 --> 00:03:13,020 ‫And there we go. 48 00:03:13,020 --> 00:03:15,810 ‫So now we have all nice stars. 49 00:03:15,810 --> 00:03:18,120 ‫Now they might be a bit too big here, 50 00:03:18,120 --> 00:03:21,513 ‫but we will later allow the user to set the size. 51 00:03:22,440 --> 00:03:23,280 ‫I'm just noticing 52 00:03:23,280 --> 00:03:26,010 ‫that we have maybe enough space between them, 53 00:03:26,010 --> 00:03:28,893 ‫and so let's remove this gap right here. 54 00:03:30,180 --> 00:03:34,350 ‫Great, now let's actually make our component dynamic, 55 00:03:34,350 --> 00:03:38,430 ‫meaning that whenever we click on one of these stars, 56 00:03:38,430 --> 00:03:40,710 ‫we then want to display the current rating 57 00:03:40,710 --> 00:03:42,393 ‫here in this paragraph element. 58 00:03:43,470 --> 00:03:48,470 ‫So since we now want the UI to re-render based on an event, 59 00:03:49,110 --> 00:03:53,433 ‫so we want something to happen on the screen, we need state. 60 00:03:56,520 --> 00:03:59,493 ‫So let's create a new state variable called rating, 61 00:04:01,560 --> 00:04:03,723 ‫of course, by using useState. 62 00:04:04,980 --> 00:04:08,013 ‫And by default, let's set it to 0. 63 00:04:10,170 --> 00:04:14,430 ‫Okay, next, let's use that state. 64 00:04:14,430 --> 00:04:19,430 ‫So as a second step, we include the rating prop right here. 65 00:04:20,130 --> 00:04:22,350 ‫And so then we see 0. 66 00:04:22,350 --> 00:04:24,930 ‫While that's maybe not so ideal, 67 00:04:24,930 --> 00:04:27,450 ‫because if the rating is still 0, 68 00:04:27,450 --> 00:04:28,710 ‫that simply doesn't mean 69 00:04:28,710 --> 00:04:32,610 ‫that the user hasn't basically rated yet, 70 00:04:32,610 --> 00:04:34,530 ‫so they haven't done anything. 71 00:04:34,530 --> 00:04:39,530 ‫And so here, let's say that we either want the rating 72 00:04:39,750 --> 00:04:41,313 ‫or an empty string. 73 00:04:42,660 --> 00:04:44,700 ‫And so thanks to short circuiting, 74 00:04:44,700 --> 00:04:48,480 ‫we will then move here to the second part of the operator 75 00:04:48,480 --> 00:04:50,610 ‫whenever this is a falsy value. 76 00:04:50,610 --> 00:04:52,980 ‫But of course, if we had 1 here, 77 00:04:52,980 --> 00:04:54,453 ‫then we would see that 1. 78 00:04:55,350 --> 00:04:58,020 ‫Now maybe just to clear the confusion a bit, 79 00:04:58,020 --> 00:05:03,020 ‫let's remove these other two star ratings here, 80 00:05:03,780 --> 00:05:05,970 ‫so working with just one. 81 00:05:05,970 --> 00:05:10,083 ‫And so where do we now need to listen for the click events? 82 00:05:11,400 --> 00:05:13,830 ‫So, basically, when the user clicks here, 83 00:05:13,830 --> 00:05:15,660 ‫then the rating should become 1. 84 00:05:15,660 --> 00:05:20,223 ‫If they click here, then it should become 2, 3, 4, and 5. 85 00:05:21,060 --> 00:05:22,170 ‫So what this means 86 00:05:22,170 --> 00:05:24,780 ‫is that we need to listen for the click event 87 00:05:24,780 --> 00:05:26,853 ‫on each of these stars. 88 00:05:29,160 --> 00:05:34,160 ‫So let's start by defining a onClick prop here, 89 00:05:35,370 --> 00:05:39,090 ‫which we will then later receive inside the star. 90 00:05:39,090 --> 00:05:42,010 ‫So here we will now define a function 91 00:05:43,650 --> 00:05:45,993 ‫which will actually set the rating. 92 00:05:46,950 --> 00:05:49,137 ‫So let's say setRating, 93 00:05:50,100 --> 00:05:54,420 ‫and then whatever the current index is, plus 1, 94 00:05:54,420 --> 00:05:58,620 ‫because remember that array indexes start at 0, 95 00:05:58,620 --> 00:06:01,500 ‫but our rating should start at 1. 96 00:06:01,500 --> 00:06:06,500 ‫Okay, so now, of course, nothing will happen right now, 97 00:06:06,750 --> 00:06:10,380 ‫because we actually need to listen for that event 98 00:06:10,380 --> 00:06:12,630 ‫on an HTML element, 99 00:06:12,630 --> 00:06:15,540 ‫so like a JSX element. 100 00:06:15,540 --> 00:06:17,340 ‫So what that means 101 00:06:17,340 --> 00:06:22,020 ‫is that here we need to now accept that onClick handler, 102 00:06:22,020 --> 00:06:25,023 ‫so this function that we defined right here, 103 00:06:28,590 --> 00:06:31,810 ‫and then use the onClick prop right here 104 00:06:32,700 --> 00:06:36,453 ‫to then actually listen for the event and react to it. 105 00:06:37,470 --> 00:06:39,390 ‫And if this is a bit confusing, 106 00:06:39,390 --> 00:06:41,340 ‫then let's maybe change the name here 107 00:06:41,340 --> 00:06:43,547 ‫from onClick to onRate. 108 00:06:45,240 --> 00:06:47,190 ‫And so then it becomes really obvious 109 00:06:47,190 --> 00:06:49,383 ‫that this is actually our own prop. 110 00:06:51,870 --> 00:06:54,300 ‫So this is our own handler function, 111 00:06:54,300 --> 00:06:57,693 ‫and we could, of course, even have created that separately. 112 00:06:59,310 --> 00:07:03,857 ‫So onClick should be onRate. 113 00:07:05,760 --> 00:07:07,110 ‫And so this is basically 114 00:07:07,110 --> 00:07:09,330 ‫what we have been doing all the time, 115 00:07:09,330 --> 00:07:11,880 ‫which is to pass an event handler function 116 00:07:11,880 --> 00:07:15,600 ‫from the component that owns the state, so this one, 117 00:07:15,600 --> 00:07:16,980 ‫right into a component 118 00:07:16,980 --> 00:07:20,250 ‫that wants to actually update that state. 119 00:07:20,250 --> 00:07:22,620 ‫So in this case, that's star. 120 00:07:22,620 --> 00:07:26,103 ‫So we can make that even more explicit if we want. 121 00:07:27,000 --> 00:07:32,000 ‫So we can say function handleRate or handleRating maybe, 122 00:07:34,350 --> 00:07:37,470 ‫and then here we accept a rating, 123 00:07:37,470 --> 00:07:39,993 ‫and all we do is then setRating, 124 00:07:42,270 --> 00:07:45,000 ‫well, to that rating that we receive. 125 00:07:45,000 --> 00:07:49,050 ‫And then here we can use that handle rating function. 126 00:07:49,050 --> 00:07:51,630 ‫And so with this, we created a similar pattern 127 00:07:51,630 --> 00:07:53,910 ‫to what we have done all the time. 128 00:07:53,910 --> 00:07:55,757 ‫So creating a handler function 129 00:07:55,757 --> 00:07:58,290 ‫in the component that owns the state 130 00:07:58,290 --> 00:08:00,660 ‫and then passing that handler function 131 00:08:00,660 --> 00:08:02,610 ‫into some other child component 132 00:08:02,610 --> 00:08:05,220 ‫which will actually update the state. 133 00:08:05,220 --> 00:08:08,580 ‫Now here we are actually passing this function here, 134 00:08:08,580 --> 00:08:09,870 ‫so not just this one, 135 00:08:09,870 --> 00:08:14,870 ‫because here we need to fix the value of the rating 136 00:08:14,997 --> 00:08:16,847 ‫that we want to be set for each star. 137 00:08:18,030 --> 00:08:20,700 ‫Okay, that was a lot of explanation, 138 00:08:20,700 --> 00:08:22,200 ‫let's just reload here. 139 00:08:22,200 --> 00:08:23,640 ‫And now as I click, 140 00:08:23,640 --> 00:08:26,463 ‫you see that the state does indeed update. 141 00:08:28,140 --> 00:08:31,590 ‫All right, so that's already working. 142 00:08:31,590 --> 00:08:36,060 ‫And yeah, if this was a bit difficult for you to understand, 143 00:08:36,060 --> 00:08:38,820 ‫then you can, as always, just pause the video here 144 00:08:38,820 --> 00:08:41,430 ‫and analyze the code on your own. 145 00:08:41,430 --> 00:08:43,830 ‫So what we did here is actually a bit similar 146 00:08:43,830 --> 00:08:46,440 ‫to what we did in previous exercises. 147 00:08:46,440 --> 00:08:49,620 ‫For example, I think, in the accordion exercise, 148 00:08:49,620 --> 00:08:51,243 ‫we did something very similar. 149 00:08:52,290 --> 00:08:54,330 ‫Okay, and now to finish, 150 00:08:54,330 --> 00:08:55,740 ‫what I want to do 151 00:08:55,740 --> 00:08:59,130 ‫is to display only the amount of stars 152 00:08:59,130 --> 00:09:01,410 ‫equal to the rating in full 153 00:09:01,410 --> 00:09:04,050 ‫and all the other stars empty, 154 00:09:04,050 --> 00:09:05,370 ‫so just like here. 155 00:09:05,370 --> 00:09:07,650 ‫So here, if I click on the 5, 156 00:09:07,650 --> 00:09:10,500 ‫then you see that 5 stars are full 157 00:09:10,500 --> 00:09:12,450 ‫and the other ones are empty. 158 00:09:12,450 --> 00:09:15,903 ‫And so here, let's now quickly do exactly the same thing. 159 00:09:16,920 --> 00:09:21,060 ‫So we already have that other empty star right here. 160 00:09:21,060 --> 00:09:24,600 ‫And so now we want to basically conditionally render 161 00:09:24,600 --> 00:09:26,823 ‫either the full or the empty star. 162 00:09:27,990 --> 00:09:30,993 ‫So let's grab this here, 163 00:09:33,240 --> 00:09:34,533 ‫let's cut it, actually. 164 00:09:36,900 --> 00:09:40,503 ‫And then here, let's enter JavaScript mode. 165 00:09:41,970 --> 00:09:46,470 ‫So we will want to have a prop here for the star 166 00:09:46,470 --> 00:09:49,233 ‫that says if this star is full. 167 00:09:51,210 --> 00:09:53,310 ‫So we will take care of that later. 168 00:09:53,310 --> 00:09:56,580 ‫But for now, let's just say, if the star is full, 169 00:09:56,580 --> 00:10:00,480 ‫then render this part, so that SVG element, 170 00:10:00,480 --> 00:10:02,973 ‫and if not, then render this one. 171 00:10:04,770 --> 00:10:08,580 ‫All right, and so now, of course, full is undefined 172 00:10:08,580 --> 00:10:10,560 ‫because we are not passing it in, 173 00:10:10,560 --> 00:10:13,683 ‫and therefore, all of the stars are empty right now. 174 00:10:14,760 --> 00:10:19,233 ‫So how do we define whether a star is full or not? 175 00:10:20,550 --> 00:10:23,613 ‫Well, it's actually pretty simple. 176 00:10:25,560 --> 00:10:30,150 ‫So full should basically be a true or false value, right? 177 00:10:30,150 --> 00:10:33,660 ‫That's why this conditional rendering here works. 178 00:10:33,660 --> 00:10:37,860 ‫So again, when full is true, then this one will be rendered. 179 00:10:37,860 --> 00:10:41,433 ‫And if it's false, than the empty star. 180 00:10:42,780 --> 00:10:46,590 ‫So here we just want to now write a condition basically 181 00:10:46,590 --> 00:10:50,280 ‫that will always be either true or false. 182 00:10:50,280 --> 00:10:53,527 ‫So all we have to do is to say, 183 00:10:53,527 --> 00:10:58,527 ‫"Is the current rating greater or equal i + 1?" 184 00:11:00,390 --> 00:11:01,800 ‫Which is always the rating 185 00:11:01,800 --> 00:11:04,023 ‫for the currently generated star. 186 00:11:04,920 --> 00:11:08,580 ‫And you see, that immediately, that worked here. 187 00:11:08,580 --> 00:11:12,183 ‫Great, so let's again see why this actually works. 188 00:11:13,020 --> 00:11:16,680 ‫So it all starts with this i variable right here. 189 00:11:16,680 --> 00:11:20,250 ‫And so this comes from the index of the empty array 190 00:11:20,250 --> 00:11:23,073 ‫that we create here with the length of maxRating. 191 00:11:24,030 --> 00:11:25,590 ‫So we create that array 192 00:11:25,590 --> 00:11:27,900 ‫and then we immediately loop over it. 193 00:11:27,900 --> 00:11:32,250 ‫And so then the first star that we create has the number 0. 194 00:11:32,250 --> 00:11:36,420 ‫So this one is star 0, 1, 2, 3, and 4. 195 00:11:36,420 --> 00:11:40,920 ‫We then use that index in order to handle our rating. 196 00:11:40,920 --> 00:11:44,070 ‫So if we click on the very first star here, 197 00:11:44,070 --> 00:11:47,640 ‫it will be 0 + 1, and so it becomes 1. 198 00:11:47,640 --> 00:11:50,370 ‫If we click on the third star here, 199 00:11:50,370 --> 00:11:52,800 ‫well, then here the index is 2, 200 00:11:52,800 --> 00:11:55,170 ‫and then 2 plus 1 makes 3. 201 00:11:55,170 --> 00:11:59,190 ‫And so then the rating, as we see, is set to 3. 202 00:11:59,190 --> 00:12:00,900 ‫And then in order to determine 203 00:12:00,900 --> 00:12:03,390 ‫whether a star is full or not, 204 00:12:03,390 --> 00:12:07,350 ‫all we need to do is to compare the currently set rating 205 00:12:07,350 --> 00:12:10,590 ‫to the index of the current star. 206 00:12:10,590 --> 00:12:13,140 ‫So here the index is 0 + 1. 207 00:12:13,140 --> 00:12:15,300 ‫So here it's 1, here it's 2, 208 00:12:15,300 --> 00:12:17,550 ‫here it's 3, 4, and 5. 209 00:12:17,550 --> 00:12:20,220 ‫And so right now, our rating is 3. 210 00:12:20,220 --> 00:12:23,670 ‫And so here, of course, that 3 is greater than 1. 211 00:12:23,670 --> 00:12:25,500 ‫Here, it's greater than 2. 212 00:12:25,500 --> 00:12:29,550 ‫Here it's greater or equal 3, and so it's still true, 213 00:12:29,550 --> 00:12:30,450 ‫but then here, 214 00:12:30,450 --> 00:12:31,950 ‫it's, of course, false. 215 00:12:31,950 --> 00:12:35,250 ‫So 3 is not greater or equal 4, 216 00:12:35,250 --> 00:12:38,100 ‫and therefore, this one here is then not full. 217 00:12:38,100 --> 00:12:40,770 ‫So this condition will return false, 218 00:12:40,770 --> 00:12:44,283 ‫which will then make the star being rendered as empty. 219 00:12:45,660 --> 00:12:48,660 ‫Okay, so hopefully, that made sense. 220 00:12:48,660 --> 00:12:52,830 ‫And indeed, our component is now already almost working. 221 00:12:52,830 --> 00:12:54,000 ‫All that is missing 222 00:12:54,000 --> 00:12:58,320 ‫is this functionality of hovering the stars. 223 00:12:58,320 --> 00:13:01,203 ‫And so let's take care of that in the next lecture.