1 00:00:01,110 --> 00:00:02,550 ‫Now, in this lecture, 2 00:00:02,550 --> 00:00:04,830 ‫we are going to implement the logic 3 00:00:04,830 --> 00:00:07,023 ‫for handling a newAnswer. 4 00:00:08,760 --> 00:00:11,010 ‫And to understand what that means, 5 00:00:11,010 --> 00:00:14,250 ‫let's check out our demo project here 6 00:00:14,250 --> 00:00:17,229 ‫and then let's give a newAnswer. 7 00:00:17,229 --> 00:00:19,890 ‫So a newAnswer is basically when we click 8 00:00:19,890 --> 00:00:21,603 ‫on one of these options here. 9 00:00:22,560 --> 00:00:23,880 ‫So let's do that. 10 00:00:23,880 --> 00:00:27,750 ‫And you see that basically three things happened. 11 00:00:27,750 --> 00:00:32,220 ‫So first, the correct and the wrong answers are displayed. 12 00:00:32,220 --> 00:00:35,520 ‫Second, the points that we got were updated. 13 00:00:35,520 --> 00:00:39,453 ‫And third, the next button was displayed down here. 14 00:00:40,350 --> 00:00:43,620 ‫So basically, when we click on one of these options, 15 00:00:43,620 --> 00:00:45,810 ‫we need to re-render the screen. 16 00:00:45,810 --> 00:00:48,180 ‫And so once again, that means 17 00:00:48,180 --> 00:00:50,700 ‫that we need a new piece of state. 18 00:00:50,700 --> 00:00:53,550 ‫And so that state should basically store 19 00:00:53,550 --> 00:00:56,760 ‫which of the options was selected. 20 00:00:56,760 --> 00:00:59,853 ‫So in other words, which was the answer? 21 00:01:00,720 --> 00:01:03,963 ‫So answer zero, one, two or three. 22 00:01:05,070 --> 00:01:07,110 ‫So basically, the answer is just going 23 00:01:07,110 --> 00:01:11,463 ‫to be the index number of this option here. 24 00:01:12,990 --> 00:01:17,190 ‫So let's come back to our App.js 25 00:01:17,190 --> 00:01:21,810 ‫and add yet another piece of state to our initial state. 26 00:01:21,810 --> 00:01:24,420 ‫So let's just call that answer. 27 00:01:24,420 --> 00:01:27,690 ‫And in the beginning, it will be null. 28 00:01:27,690 --> 00:01:30,420 ‫So there will be no answer initially. 29 00:01:30,420 --> 00:01:32,910 ‫And so that makes sense, right? 30 00:01:32,910 --> 00:01:35,520 ‫And now next, let's then create an action 31 00:01:35,520 --> 00:01:38,463 ‫in our reducer to update that answer. 32 00:01:39,840 --> 00:01:42,633 ‫So let's do that, well, after this one here. 33 00:01:44,040 --> 00:01:45,660 ‫So let's keep them in order. 34 00:01:45,660 --> 00:01:48,687 ‫And here, let's call this one newAnswer. 35 00:01:51,030 --> 00:01:54,270 ‫So then later, we will dispatch a new action 36 00:01:54,270 --> 00:01:57,063 ‫with a newAnswer type, right? 37 00:01:58,020 --> 00:02:03,020 ‫And so here, let's return as always the state 38 00:02:03,180 --> 00:02:08,180 ‫and then the answer will get set to the action.payload. 39 00:02:11,490 --> 00:02:13,830 ‫So very simple stuff. 40 00:02:13,830 --> 00:02:16,890 ‫And so now we need to go here 41 00:02:16,890 --> 00:02:20,940 ‫into our question or actually into these options 42 00:02:20,940 --> 00:02:25,050 ‫because here is where the click on the button will happen. 43 00:02:25,050 --> 00:02:29,523 ‫So here is where we will now need to dispatch a new action. 44 00:02:31,470 --> 00:02:35,670 ‫So that means that we need to pass the dispatch function 45 00:02:35,670 --> 00:02:40,670 ‫into questions or into question actually. 46 00:02:42,660 --> 00:02:47,660 ‫So dispatch and then the dispatch function. 47 00:02:48,450 --> 00:02:52,563 ‫And we will also need the answer that we gave. 48 00:02:54,810 --> 00:02:57,930 ‫So this one we need so that we can then display 49 00:02:57,930 --> 00:03:01,530 ‫if the answer that was given was correct or not. 50 00:03:01,530 --> 00:03:04,653 ‫So painting it basically with one of these colors. 51 00:03:06,480 --> 00:03:11,073 ‫And again, we need to de-structure this first here. 52 00:03:13,830 --> 00:03:15,483 ‫So we need our answer. 53 00:03:16,710 --> 00:03:19,140 ‫Yeah, so dispatch and answer, 54 00:03:19,140 --> 00:03:23,293 ‫so let's grab them here and then passing them in here. 55 00:03:29,160 --> 00:03:34,160 ‫So a bit of prop drilling, you can maybe identify here 56 00:03:34,170 --> 00:03:38,133 ‫but that's not a big deal if it's like just this one level. 57 00:03:41,580 --> 00:03:46,580 ‫So then accepting these two props here and there we go. 58 00:03:46,740 --> 00:03:49,983 ‫Now we can from here, dispatch the action. 59 00:03:50,850 --> 00:03:52,173 ‫So onClick. 60 00:03:57,390 --> 00:04:00,510 ‫So dispatch and the type 61 00:04:00,510 --> 00:04:05,510 ‫of this event, well, let's see, I don't remember. 62 00:04:06,870 --> 00:04:08,670 ‫So that's newAnswer. 63 00:04:08,670 --> 00:04:12,513 ‫And the payload should then be the answer that was given. 64 00:04:13,860 --> 00:04:18,860 ‫So newAnswer and the payload again is the answer. 65 00:04:22,230 --> 00:04:24,480 ‫Now, what is the answer? 66 00:04:24,480 --> 00:04:27,150 ‫Well, remember how we said earlier 67 00:04:27,150 --> 00:04:30,960 ‫that the answer is basically the index of the option. 68 00:04:30,960 --> 00:04:35,820 ‫So in this case that would be here, index number one, right? 69 00:04:35,820 --> 00:04:38,940 ‫And the reason for that is that the correct option 70 00:04:38,940 --> 00:04:42,093 ‫is also marked using these same indexes. 71 00:04:44,940 --> 00:04:47,580 ‫So I just want to show you that because I think 72 00:04:47,580 --> 00:04:51,570 ‫that besides learning the React part, it's also important 73 00:04:51,570 --> 00:04:55,623 ‫that you learn how to build applications basically. 74 00:04:57,510 --> 00:05:01,170 ‫Now here, our app changed to a different state, 75 00:05:01,170 --> 00:05:03,333 ‫so the finished state, but nevermind. 76 00:05:04,200 --> 00:05:06,870 ‫So what I was saying is that the correct option here 77 00:05:06,870 --> 00:05:09,720 ‫is also using these indexes. 78 00:05:09,720 --> 00:05:13,380 ‫And so indeed here the correct option is React. 79 00:05:13,380 --> 00:05:15,393 ‫And so that's index number one. 80 00:05:18,240 --> 00:05:23,240 ‫All right, so then how do we get the current index here? 81 00:05:23,640 --> 00:05:26,160 ‫Well, we can just get it here 82 00:05:26,160 --> 00:05:28,923 ‫as the second argument of the map method. 83 00:05:30,210 --> 00:05:33,030 ‫So that's just how this method works 84 00:05:33,030 --> 00:05:36,120 ‫where the first option is the current element of the array 85 00:05:36,120 --> 00:05:40,323 ‫and the second argument is the current index. 86 00:05:42,030 --> 00:05:44,940 ‫And so this is all we need. 87 00:05:44,940 --> 00:05:46,410 ‫So let's check that. 88 00:05:46,410 --> 00:05:48,960 ‫Let's click maybe here this time. 89 00:05:48,960 --> 00:05:52,050 ‫And so then when we come to our state, 90 00:05:52,050 --> 00:05:54,363 ‫we should have the answer of two. 91 00:05:56,100 --> 00:05:59,943 ‫And well, where is that? 92 00:06:03,540 --> 00:06:05,370 ‫It's not really anywhere. 93 00:06:05,370 --> 00:06:07,890 ‫So let's reload. 94 00:06:07,890 --> 00:06:10,893 ‫Maybe I forgot to reload the application. 95 00:06:12,000 --> 00:06:13,443 ‫Let's try that again. 96 00:06:14,370 --> 00:06:16,170 ‫Ah, and apparently I did. 97 00:06:16,170 --> 00:06:19,080 ‫So now we got the answer right here. 98 00:06:19,080 --> 00:06:20,400 ‫Nice. 99 00:06:20,400 --> 00:06:21,750 ‫And so next up, 100 00:06:21,750 --> 00:06:25,500 ‫let's then do some formatting based on this answer. 101 00:06:25,500 --> 00:06:28,680 ‫And so that's why these options here received 102 00:06:28,680 --> 00:06:30,750 ‫that answer prop. 103 00:06:30,750 --> 00:06:32,253 ‫So that stayed right here. 104 00:06:33,600 --> 00:06:35,010 ‫So what we're going to do 105 00:06:35,010 --> 00:06:38,823 ‫is to basically change the class names here conditionally. 106 00:06:39,660 --> 00:06:43,980 ‫So let's create a template literal, and then first of all, 107 00:06:43,980 --> 00:06:47,940 ‫let's create a class for the selected option. 108 00:06:47,940 --> 00:06:49,470 ‫So here, let's say 109 00:06:49,470 --> 00:06:54,333 ‫if the current index is equal to the answer, 110 00:06:55,890 --> 00:07:00,890 ‫then add the answer class and otherwise don't add anything. 111 00:07:02,730 --> 00:07:05,460 ‫So when we're doing conditional CSS, 112 00:07:05,460 --> 00:07:08,070 ‫we should always use the turnary operator 113 00:07:08,070 --> 00:07:12,870 ‫so that in the opposite case, so in this third branch here, 114 00:07:12,870 --> 00:07:15,030 ‫then we return no string at all. 115 00:07:15,030 --> 00:07:16,737 ‫And so you saw that here, 116 00:07:16,737 --> 00:07:18,600 ‫the question that we selected 117 00:07:18,600 --> 00:07:20,520 ‫actually got this special class 118 00:07:20,520 --> 00:07:22,680 ‫where it moved a bit to the right 119 00:07:22,680 --> 00:07:24,570 ‫and if we selected this one, 120 00:07:24,570 --> 00:07:27,393 ‫well, then that one would get that special class. 121 00:07:28,530 --> 00:07:30,360 ‫So that's the first thing. 122 00:07:30,360 --> 00:07:33,570 ‫And now we also then basically need to paint them 123 00:07:33,570 --> 00:07:35,760 ‫in the right color depending 124 00:07:35,760 --> 00:07:39,900 ‫if the option is the correct option or not. 125 00:07:39,900 --> 00:07:43,470 ‫So let's again enter here the JavaScript mode. 126 00:07:43,470 --> 00:07:45,570 ‫And then let's say 127 00:07:45,570 --> 00:07:50,570 ‫if the current index is equal to question.correctOption, 128 00:07:56,220 --> 00:08:01,220 ‫then at the class correct and otherwise, wrong. 129 00:08:04,470 --> 00:08:06,450 ‫And beautiful. 130 00:08:06,450 --> 00:08:08,460 ‫So that's working. 131 00:08:08,460 --> 00:08:12,000 ‫And again, let's just check our state here 132 00:08:12,000 --> 00:08:13,863 ‫so we see what's going on. 133 00:08:14,760 --> 00:08:17,130 ‫So again, each of these options 134 00:08:17,130 --> 00:08:21,090 ‫or of these questions actually has the correct option 135 00:08:21,090 --> 00:08:22,410 ‫as a property here. 136 00:08:22,410 --> 00:08:24,180 ‫So that's number one here. 137 00:08:24,180 --> 00:08:27,150 ‫And so number one in this case here, 138 00:08:27,150 --> 00:08:30,240 ‫so in this option is equal to the index 139 00:08:30,240 --> 00:08:33,240 ‫and so therefore, it was then marked as correct 140 00:08:33,240 --> 00:08:35,313 ‫and all the other ones as wrong. 141 00:08:36,930 --> 00:08:37,763 ‫Okay? 142 00:08:37,763 --> 00:08:41,580 ‫And now we can actually click multiple times here 143 00:08:41,580 --> 00:08:44,370 ‫but of course, that should not be allowed. 144 00:08:44,370 --> 00:08:47,460 ‫So once the user clicks on one of these options, 145 00:08:47,460 --> 00:08:49,650 ‫then it should be locked in. 146 00:08:49,650 --> 00:08:52,470 ‫And so we then can no longer click. 147 00:08:52,470 --> 00:08:57,470 ‫And so let's just disable the button with the disabled prop. 148 00:08:58,890 --> 00:09:01,080 ‫And then here, basically we want to know 149 00:09:01,080 --> 00:09:03,030 ‫if there was an answer. 150 00:09:03,030 --> 00:09:06,753 ‫So any answer at all would then disable this button. 151 00:09:08,760 --> 00:09:10,950 ‫So since we know that the initial state 152 00:09:10,950 --> 00:09:12,480 ‫of the answer is null, 153 00:09:12,480 --> 00:09:16,980 ‫we can just check if the answer is not null. 154 00:09:16,980 --> 00:09:20,157 ‫So if it's not null means that there was an answer 155 00:09:20,157 --> 00:09:22,563 ‫and then we want to disable the buttons. 156 00:09:24,000 --> 00:09:25,593 ‫So let's try that again. 157 00:09:26,940 --> 00:09:29,310 ‫Ah, but we have some problem here. 158 00:09:29,310 --> 00:09:33,840 ‫So all our options are already painted, so that's very bad 159 00:09:33,840 --> 00:09:36,960 ‫because it gives away the correct option here. 160 00:09:36,960 --> 00:09:40,503 ‫And so actually what we did here was not really correct. 161 00:09:41,700 --> 00:09:45,540 ‫So basically classifying each of them as correct and wrong. 162 00:09:45,540 --> 00:09:50,460 ‫We only want that to happen if there was an answer at all. 163 00:09:50,460 --> 00:09:54,630 ‫So basically in this situation, so we need to reuse that. 164 00:09:54,630 --> 00:09:59,340 ‫So let's just place that in a special variable. 165 00:09:59,340 --> 00:10:02,373 ‫Let's say hasAnswered. 166 00:10:04,170 --> 00:10:06,573 ‫Okay, and then let's use that here. 167 00:10:09,510 --> 00:10:11,550 ‫And here as well. 168 00:10:11,550 --> 00:10:14,553 ‫Now here, this will become a bit confusing, 169 00:10:16,110 --> 00:10:18,870 ‫so use a turnary and then another one. 170 00:10:18,870 --> 00:10:22,593 ‫So we have nested turnaries, which is pretty ugly, 171 00:10:23,430 --> 00:10:27,060 ‫so we could actually do this outside as well 172 00:10:27,060 --> 00:10:29,430 ‫but let's just keep it like this. 173 00:10:29,430 --> 00:10:34,430 ‫So it is readable if you understand the logic behind this. 174 00:10:34,590 --> 00:10:37,860 ‫And so it looks as though now it is correct. 175 00:10:37,860 --> 00:10:40,920 ‫So let's select something here. 176 00:10:40,920 --> 00:10:44,220 ‫And yeah, now we cannot click on the other ones. 177 00:10:44,220 --> 00:10:48,900 ‫And also everything is marked in the correct way. 178 00:10:48,900 --> 00:10:50,430 ‫So we selected this one. 179 00:10:50,430 --> 00:10:53,550 ‫So this one got the special class, but it is wrong. 180 00:10:53,550 --> 00:10:57,150 ‫So it's then yellow and only this one is blue 181 00:10:57,150 --> 00:10:58,980 ‫because it is correct. 182 00:10:58,980 --> 00:11:01,260 ‫So it has the correct class then. 183 00:11:01,260 --> 00:11:04,980 ‫Great, so we took care of one of the three things 184 00:11:04,980 --> 00:11:06,630 ‫that should happen. 185 00:11:06,630 --> 00:11:10,680 ‫So again, the correct answers should be displayed. 186 00:11:10,680 --> 00:11:13,770 ‫Then the user's score should be updated 187 00:11:13,770 --> 00:11:17,910 ‫and the next button down here should be displayed. 188 00:11:17,910 --> 00:11:21,780 ‫So let's now quickly take care of the second part. 189 00:11:21,780 --> 00:11:25,263 ‫So basically that the user's score should be updated. 190 00:11:26,880 --> 00:11:30,030 ‫So that is something that needs to again update 191 00:11:30,030 --> 00:11:31,800 ‫on the screen, which means 192 00:11:31,800 --> 00:11:35,043 ‫that we need yet another state variable. 193 00:11:36,150 --> 00:11:40,713 ‫So let's call this points and user starts at zero. 194 00:11:41,970 --> 00:11:45,780 ‫Okay, and now where do we update these points? 195 00:11:45,780 --> 00:11:48,750 ‫Well, it makes sense that it is exactly 196 00:11:48,750 --> 00:11:52,323 ‫in the same place where we received the newAnswer. 197 00:11:53,490 --> 00:11:56,553 ‫So right here, we will also update the points. 198 00:11:57,900 --> 00:11:59,880 ‫So how are we going to do that? 199 00:11:59,880 --> 00:12:02,880 ‫Because, of course, the points should only be awarded 200 00:12:02,880 --> 00:12:05,430 ‫if the answer was correct. 201 00:12:05,430 --> 00:12:07,110 ‫So we need to first figure out 202 00:12:07,110 --> 00:12:09,120 ‫which is the current question. 203 00:12:09,120 --> 00:12:12,450 ‫Then if the answer is correct and only then, 204 00:12:12,450 --> 00:12:16,620 ‫we want to add the points to the current points. 205 00:12:16,620 --> 00:12:18,330 ‫So that sounds confusing. 206 00:12:18,330 --> 00:12:19,533 ‫So let's just do it. 207 00:12:20,910 --> 00:12:22,710 ‫So first of all, let's figure out 208 00:12:22,710 --> 00:12:25,240 ‫which is the current question 209 00:12:26,490 --> 00:12:29,790 ‫because we actually don't have that stored in the state. 210 00:12:29,790 --> 00:12:34,143 ‫So we only know the index, but not the question itself. 211 00:12:35,970 --> 00:12:40,970 ‫So let's grab state.questions at state.index. 212 00:12:45,690 --> 00:12:49,200 ‫And so here really we are leveraging the current state 213 00:12:49,200 --> 00:12:52,833 ‫that we get into the reducer to compute the next state. 214 00:12:54,750 --> 00:12:57,333 ‫So really relying on that current state. 215 00:12:58,740 --> 00:13:02,070 ‫So with this, we know which is the current question. 216 00:13:02,070 --> 00:13:03,750 ‫And so now we can then check 217 00:13:03,750 --> 00:13:07,383 ‫if the current question is equal to the received answer. 218 00:13:08,340 --> 00:13:12,340 ‫So that received answer is again action.payload. 219 00:13:14,640 --> 00:13:15,900 ‫And now let's check 220 00:13:15,900 --> 00:13:19,283 ‫if it is equal to question.correctOption again. 221 00:13:22,200 --> 00:13:24,168 ‫So this property that we have used 222 00:13:24,168 --> 00:13:29,168 ‫before already here, right? 223 00:13:29,820 --> 00:13:32,400 ‫So if that is the case, 224 00:13:32,400 --> 00:13:36,810 ‫then we want to add some points to the current points. 225 00:13:36,810 --> 00:13:41,810 ‫And so that is state.points plus something. 226 00:13:42,960 --> 00:13:45,540 ‫Let's just do one for now 227 00:13:45,540 --> 00:13:48,090 ‫and otherwise, the points will just stay the same. 228 00:13:48,090 --> 00:13:51,467 ‫So then we will just return again state.points. 229 00:13:54,900 --> 00:13:58,500 ‫Okay, now here we are adding one for now 230 00:13:58,500 --> 00:14:01,740 ‫but that is not what we want to add in the end 231 00:14:01,740 --> 00:14:06,740 ‫because notice again how each of our questions object. 232 00:14:08,280 --> 00:14:12,900 ‫Actually no, let's give a lot more space. 233 00:14:12,900 --> 00:14:15,810 ‫So each of them has this points property, 234 00:14:15,810 --> 00:14:18,180 ‫which is because each of them actually 235 00:14:18,180 --> 00:14:21,090 ‫has a different points value. 236 00:14:21,090 --> 00:14:24,090 ‫So the easier ones only give 10 points, 237 00:14:24,090 --> 00:14:26,523 ‫but then if they are more difficult, 238 00:14:27,720 --> 00:14:30,000 ‫well, it's maybe this one. 239 00:14:30,000 --> 00:14:31,113 ‫Well, not really. 240 00:14:32,490 --> 00:14:34,200 ‫So there are some hard ones. 241 00:14:34,200 --> 00:14:35,460 ‫Yeah, like this one. 242 00:14:35,460 --> 00:14:37,710 ‫So this one adds 30 points 243 00:14:37,710 --> 00:14:42,180 ‫and so we need to get actually that value. 244 00:14:42,180 --> 00:14:46,743 ‫So that is at the current question.points. 245 00:14:47,790 --> 00:14:50,190 ‫All right, so I understand 246 00:14:50,190 --> 00:14:52,710 ‫that this here might seem a bit confusing 247 00:14:52,710 --> 00:14:55,890 ‫but this is really just understanding what kind 248 00:14:55,890 --> 00:14:59,400 ‫of data we have and then working with that data. 249 00:14:59,400 --> 00:15:02,220 ‫And also you notice that here we now have 250 00:15:02,220 --> 00:15:07,020 ‫for the first time quite a more complex state updating logic 251 00:15:07,020 --> 00:15:08,520 ‫in our reducer. 252 00:15:08,520 --> 00:15:12,240 ‫And this is perfectly fine and actually encouraged. 253 00:15:12,240 --> 00:15:14,160 ‫So whenever it's possible, 254 00:15:14,160 --> 00:15:17,550 ‫we should try to put as much of the logic 255 00:15:17,550 --> 00:15:22,110 ‫for calculating the next state right into the reducer. 256 00:15:22,110 --> 00:15:25,680 ‫So it's better for this logic here to be in the reducer 257 00:15:25,680 --> 00:15:30,680 ‫than in the place where the event is actually first handled. 258 00:15:30,900 --> 00:15:33,180 ‫So basically, we could probably 259 00:15:33,180 --> 00:15:35,760 ‫also do this calculation right here 260 00:15:35,760 --> 00:15:38,380 ‫in the option where we handle the event 261 00:15:39,390 --> 00:15:43,560 ‫but that would go against the logic of the useReducer hook. 262 00:15:43,560 --> 00:15:45,873 ‫So it's much better to do it like this. 263 00:15:47,280 --> 00:15:49,473 ‫All right, so this should be working. 264 00:15:50,790 --> 00:15:51,903 ‫Let's check it. 265 00:15:52,980 --> 00:15:56,040 ‫So we know that this question is worth 10 points. 266 00:15:56,040 --> 00:16:00,210 ‫And so if we select the correct one, then you notice 267 00:16:00,210 --> 00:16:03,513 ‫that our points have indeed been updated to 10, 268 00:16:04,440 --> 00:16:05,853 ‫so that's zero plus 10. 269 00:16:06,810 --> 00:16:09,150 ‫And if we select the wrong one, 270 00:16:09,150 --> 00:16:11,733 ‫then our points stay at zero. 271 00:16:12,600 --> 00:16:13,710 ‫Great. 272 00:16:13,710 --> 00:16:16,980 ‫So, of course, we will later then display these points 273 00:16:16,980 --> 00:16:17,813 ‫in the UI. 274 00:16:18,660 --> 00:16:21,090 ‫But let's leave that for a bit later 275 00:16:21,090 --> 00:16:23,520 ‫because next up, we need to take care 276 00:16:23,520 --> 00:16:27,000 ‫of displaying the next button and handling the logic 277 00:16:27,000 --> 00:16:30,450 ‫of actually moving to that next question. 278 00:16:30,450 --> 00:16:33,480 ‫So basically, when we finish here, 279 00:16:33,480 --> 00:16:36,300 ‫then we want to click and go to the next one. 280 00:16:36,300 --> 00:16:39,393 ‫And so that is what we will do in the next video.