‫So, now we have the simple task
‫of moving to the next question
‫as soon as an answer has been given.
‫So, as soon as the user clicks on one of these options,
‫we want a button down here to appear that we can click.
‫And so then we will move automatically to the next question.
‫Now, as we have discussed before,
‫moving to the next question,
‫basically means increasing this index here, right?
‫Because it is based on this index
‫that the current question is being read and then displayed.
‫So, that's what we do right here.
‫So we're passing in the questions object
‫that corresponds to the current index.
‫And so, let's now, here,
‫create yet another possible action in our reducer.
‫Now let's call this one just nextQuestion.
‫So, here, we will just return the current state,
‫and all we want to change is the index property
‫which will be set to state.index + 1,
‫and that should be it.
‫At least for now.
‫And so now, we need to create actually that button.
‫So, besides the question,
‫we want to then display the button.
‫And so that's actually always display a button component,
‫but that button component will then only render
‫the button element itself if there has been an answer.
‫So we could also do it the other way around,
‫and do the conditional rendering right here.
‫But instead, we're going to do that conditional rendering
‫inside the button.
‫So we will allow this next button to basically decide
‫if it wants to render itself or not.
‫And so, since we want to dispatch an action from there,
‫we need to pass that in.
‫And so, now of course, we need to create this component.
‫But before we do that,
‫here we have a problem because we need a fragment now.
‫Okay.
‫And now, as I was saying,
‫we need to create this new component right here.
‫Okay.
‫And then let's already receive the dispatch function,
‫but we also need the answer.
‫And so that's because of what I was saying earlier.
‫So that we want this component here to allow
‫if it wants to render the button or not,
‫in case there has been an answer.
‫So let's pass in also the current answer.
‫And of course, we then need to import
‫also this component here.
‫So just duplicate that.
‫And yeah, I think that should be it.
‫So let's go back here and accept that answer prop.
‫So doing an early return,
‫we can say if the answer is null,
‫which remember, means that there has been no answer,
‫then just return nothing here.
‫So just return null.
‫And otherwise, then we actually create a button.
‫So here, we say next,
‫and the class name should be btn and btn-ui.
‫And then finally, the onClick handler
‫will be a new function.
‫And then of course we dispatch a new action.
‫And so remember, this one is the one we just created
‫which is next question.
‫And for this state transition that this will trigger,
‫our reducer doesn't need any data,
‫and therefore there is no payload here necessary.
‫Okay.
‫And let's see if this works.
‫So let's start and let's click.
‫And indeed, there is our button.
‫And so let's now test.
‫And yeah, it moved forward to the next question,
‫but we still have a problem,
‫which is that our answer has not been reset.
‫And so, therefore, we are still showing
‫the previously given reply.
‫So that's easy to fix.
‫But what matters, is that we can now actually move
‫through these different questions.
‫So let's then just quickly fix that problem.
‫And so, all we need to do is to again,
‫come to our central place
‫where all these state updating takes place.
‫So, what should we do here?
‫Well, we just need to set the answer back to null,
‫and that will fix it.
‫And once again, we can really see here in action,
‫how all these different state variables
‫closely belong together.
‫And so the useReducer Hook, really was the perfect solution
‫for managing our state in this application.
‫But anyway, let's now again, test this,
‫and yeah, that fixes it.
‫So let's try another one here.
‫And this one is components,
‫just to see if our points are correctly updating.
‫Yeah, and they are.
‫So now we have 30 points,
‫which is 10 points for each question
‫that we just successfully answered.
‫And speaking of these points,
‫we now actually want to display them up here,
‫so the current points out of all the possible points,
‫together with the progress that we have been doing.
‫So basically displaying this part right here.
‫So, don't wait and let's move together
‫right to the next video to do that.