1 00:00:01,080 --> 00:00:03,780 ‫So, now we have the simple task 2 00:00:03,780 --> 00:00:05,910 ‫of moving to the next question 3 00:00:05,910 --> 00:00:08,973 ‫as soon as an answer has been given. 4 00:00:10,620 --> 00:00:14,550 ‫So, as soon as the user clicks on one of these options, 5 00:00:14,550 --> 00:00:18,450 ‫we want a button down here to appear that we can click. 6 00:00:18,450 --> 00:00:22,920 ‫And so then we will move automatically to the next question. 7 00:00:22,920 --> 00:00:25,020 ‫Now, as we have discussed before, 8 00:00:25,020 --> 00:00:26,670 ‫moving to the next question, 9 00:00:26,670 --> 00:00:30,720 ‫basically means increasing this index here, right? 10 00:00:30,720 --> 00:00:32,880 ‫Because it is based on this index 11 00:00:32,880 --> 00:00:37,650 ‫that the current question is being read and then displayed. 12 00:00:37,650 --> 00:00:41,190 ‫So, that's what we do right here. 13 00:00:41,190 --> 00:00:43,350 ‫So we're passing in the questions object 14 00:00:43,350 --> 00:00:46,440 ‫that corresponds to the current index. 15 00:00:46,440 --> 00:00:49,770 ‫And so, let's now, here, 16 00:00:49,770 --> 00:00:54,300 ‫create yet another possible action in our reducer. 17 00:00:54,300 --> 00:00:57,637 ‫Now let's call this one just nextQuestion. 18 00:01:01,200 --> 00:01:06,200 ‫So, here, we will just return the current state, 19 00:01:06,900 --> 00:01:10,590 ‫and all we want to change is the index property 20 00:01:10,590 --> 00:01:15,590 ‫which will be set to state.index + 1, 21 00:01:15,840 --> 00:01:17,253 ‫and that should be it. 22 00:01:18,390 --> 00:01:19,767 ‫At least for now. 23 00:01:19,767 --> 00:01:24,393 ‫And so now, we need to create actually that button. 24 00:01:25,350 --> 00:01:27,270 ‫So, besides the question, 25 00:01:27,270 --> 00:01:30,120 ‫we want to then display the button. 26 00:01:30,120 --> 00:01:34,050 ‫And so that's actually always display a button component, 27 00:01:34,050 --> 00:01:37,260 ‫but that button component will then only render 28 00:01:37,260 --> 00:01:41,430 ‫the button element itself if there has been an answer. 29 00:01:41,430 --> 00:01:43,830 ‫So we could also do it the other way around, 30 00:01:43,830 --> 00:01:46,920 ‫and do the conditional rendering right here. 31 00:01:46,920 --> 00:01:50,310 ‫But instead, we're going to do that conditional rendering 32 00:01:50,310 --> 00:01:52,050 ‫inside the button. 33 00:01:52,050 --> 00:01:56,010 ‫So we will allow this next button to basically decide 34 00:01:56,010 --> 00:01:58,683 ‫if it wants to render itself or not. 35 00:02:00,330 --> 00:02:03,480 ‫And so, since we want to dispatch an action from there, 36 00:02:03,480 --> 00:02:05,553 ‫we need to pass that in. 37 00:02:06,720 --> 00:02:10,740 ‫And so, now of course, we need to create this component. 38 00:02:10,740 --> 00:02:12,270 ‫But before we do that, 39 00:02:12,270 --> 00:02:16,353 ‫here we have a problem because we need a fragment now. 40 00:02:17,400 --> 00:02:18,720 ‫Okay. 41 00:02:18,720 --> 00:02:20,100 ‫And now, as I was saying, 42 00:02:20,100 --> 00:02:25,100 ‫we need to create this new component right here. 43 00:02:27,180 --> 00:02:28,173 ‫Okay. 44 00:02:31,320 --> 00:02:36,320 ‫And then let's already receive the dispatch function, 45 00:02:36,840 --> 00:02:39,360 ‫but we also need the answer. 46 00:02:39,360 --> 00:02:42,810 ‫And so that's because of what I was saying earlier. 47 00:02:42,810 --> 00:02:45,930 ‫So that we want this component here to allow 48 00:02:45,930 --> 00:02:48,870 ‫if it wants to render the button or not, 49 00:02:48,870 --> 00:02:50,733 ‫in case there has been an answer. 50 00:02:52,530 --> 00:02:57,530 ‫So let's pass in also the current answer. 51 00:02:58,230 --> 00:03:02,070 ‫And of course, we then need to import 52 00:03:02,070 --> 00:03:03,483 ‫also this component here. 53 00:03:05,310 --> 00:03:07,530 ‫So just duplicate that. 54 00:03:07,530 --> 00:03:12,530 ‫And yeah, I think that should be it. 55 00:03:12,630 --> 00:03:17,013 ‫So let's go back here and accept that answer prop. 56 00:03:20,370 --> 00:03:22,560 ‫So doing an early return, 57 00:03:22,560 --> 00:03:27,300 ‫we can say if the answer is null, 58 00:03:27,300 --> 00:03:31,410 ‫which remember, means that there has been no answer, 59 00:03:31,410 --> 00:03:33,333 ‫then just return nothing here. 60 00:03:34,170 --> 00:03:35,760 ‫So just return null. 61 00:03:35,760 --> 00:03:40,760 ‫And otherwise, then we actually create a button. 62 00:03:43,110 --> 00:03:44,700 ‫So here, we say next, 63 00:03:44,700 --> 00:03:49,143 ‫and the class name should be btn and btn-ui. 64 00:03:49,980 --> 00:03:53,340 ‫And then finally, the onClick handler 65 00:03:53,340 --> 00:03:57,090 ‫will be a new function. 66 00:03:57,090 --> 00:04:01,143 ‫And then of course we dispatch a new action. 67 00:04:02,130 --> 00:04:05,670 ‫And so remember, this one is the one we just created 68 00:04:05,670 --> 00:04:08,610 ‫which is next question. 69 00:04:08,610 --> 00:04:12,000 ‫And for this state transition that this will trigger, 70 00:04:12,000 --> 00:04:14,340 ‫our reducer doesn't need any data, 71 00:04:14,340 --> 00:04:18,183 ‫and therefore there is no payload here necessary. 72 00:04:19,200 --> 00:04:20,250 ‫Okay. 73 00:04:20,250 --> 00:04:23,220 ‫And let's see if this works. 74 00:04:23,220 --> 00:04:26,220 ‫So let's start and let's click. 75 00:04:26,220 --> 00:04:28,320 ‫And indeed, there is our button. 76 00:04:28,320 --> 00:04:29,703 ‫And so let's now test. 77 00:04:30,750 --> 00:04:34,770 ‫And yeah, it moved forward to the next question, 78 00:04:34,770 --> 00:04:36,600 ‫but we still have a problem, 79 00:04:36,600 --> 00:04:40,470 ‫which is that our answer has not been reset. 80 00:04:40,470 --> 00:04:42,780 ‫And so, therefore, we are still showing 81 00:04:42,780 --> 00:04:45,120 ‫the previously given reply. 82 00:04:45,120 --> 00:04:46,980 ‫So that's easy to fix. 83 00:04:46,980 --> 00:04:50,340 ‫But what matters, is that we can now actually move 84 00:04:50,340 --> 00:04:52,053 ‫through these different questions. 85 00:04:53,250 --> 00:04:56,400 ‫So let's then just quickly fix that problem. 86 00:04:56,400 --> 00:04:59,130 ‫And so, all we need to do is to again, 87 00:04:59,130 --> 00:05:00,840 ‫come to our central place 88 00:05:00,840 --> 00:05:03,693 ‫where all these state updating takes place. 89 00:05:05,250 --> 00:05:07,620 ‫So, what should we do here? 90 00:05:07,620 --> 00:05:12,620 ‫Well, we just need to set the answer back to null, 91 00:05:14,580 --> 00:05:16,200 ‫and that will fix it. 92 00:05:16,200 --> 00:05:19,260 ‫And once again, we can really see here in action, 93 00:05:19,260 --> 00:05:21,360 ‫how all these different state variables 94 00:05:21,360 --> 00:05:23,340 ‫closely belong together. 95 00:05:23,340 --> 00:05:27,150 ‫And so the useReducer Hook, really was the perfect solution 96 00:05:27,150 --> 00:05:30,183 ‫for managing our state in this application. 97 00:05:31,050 --> 00:05:33,363 ‫But anyway, let's now again, test this, 98 00:05:34,950 --> 00:05:37,773 ‫and yeah, that fixes it. 99 00:05:38,940 --> 00:05:40,653 ‫So let's try another one here. 100 00:05:43,421 --> 00:05:45,450 ‫And this one is components, 101 00:05:45,450 --> 00:05:49,533 ‫just to see if our points are correctly updating. 102 00:05:50,400 --> 00:05:51,690 ‫Yeah, and they are. 103 00:05:51,690 --> 00:05:53,250 ‫So now we have 30 points, 104 00:05:53,250 --> 00:05:55,680 ‫which is 10 points for each question 105 00:05:55,680 --> 00:05:58,320 ‫that we just successfully answered. 106 00:05:58,320 --> 00:06:00,090 ‫And speaking of these points, 107 00:06:00,090 --> 00:06:03,240 ‫we now actually want to display them up here, 108 00:06:03,240 --> 00:06:06,720 ‫so the current points out of all the possible points, 109 00:06:06,720 --> 00:06:10,980 ‫together with the progress that we have been doing. 110 00:06:10,980 --> 00:06:13,623 ‫So basically displaying this part right here. 111 00:06:14,580 --> 00:06:17,520 ‫So, don't wait and let's move together 112 00:06:17,520 --> 00:06:19,953 ‫right to the next video to do that.