‫Now, it's time to implement the functionality
‫of starting a new quiz.
‫So, how are we going to do that?
‫Well, after we click here on this button,
‫we basically want to display the first question
‫here inside this main component.
‫So, basically, right here,
‫and since we have been using this status state here
‫to basically decide what will be rendered in the main,
‫all we have to do now is to change that status
‫to something else and then display that question here.
‫And let's actually start with that.
‫So, let's say if the status was active,
‫then here, we want to display the question component.
‫So, that component doesn't exist yet,
‫and so, let's create it.
‫So, yet another component file here, let's close that
‫and then our nice snippet again.
‫So, here, I will just write question for now
‫and then of course, we need to import that.
‫Okay. Well, that's not correct, but yeah, now, it is.
‫So, here, remember, that active is one
‫of the five different status that the application can have.
‫And so, now, we are here basically handling
‫that active state.
‫So, right here.
‫So, again, we are using this different status to decide
‫what will be displayed here in this main part of the app.
‫And it's a bit like a flow as well.
‫So, first, the status is loading, then we display this.
‫In case there was an error, then we display this.
‫But if everything went well,
‫well, then we display the next one.
‫And then once the user collects here,
‫then we display the next one.
‫So, this question right here.
‫But now, the question is
‫how do we actually set this status to active?
‫Or in other words, how do we now start the game?
‫Well, all we have to do is to create basically
‫a new action type here in our reducer,
‫which will set the status to start or to active actually.
‫So, let's create a new action type here
‫and let's call this one start.
‫And so, here, we want to return a new state as always,
‫which is comprised of the current state
‫anti-status set to active.
‫All right. And so, now, it's very easy.
‫We just have to dispatch an action from this button here
‫with the action type of start that we just created.
‫So, we're going to do that here.
‫So, here we will want to dispatch that action.
‫And so therefore, we now need access
‫to that dispatch function.
‫So, it needs to be a prop.
‫And so, let's pass that here into the start screen.
‫And so, as you see,
‫we are basically passing the dispatch function around,
‫just like before we were passing around
‫event handler functions or the set state functions, right?
‫So, if we were still using new state,
‫then we would now probably create
‫some new event handler here
‫and then we would pass that event handler
‫into the start screen.
‫But now, we don't need to do any of that anymore
‫because we are handling all the state transitions
‫in the reducer.
‫And then all we do is to pass
‫the dispatcher functions around because then it's very easy.
‫All we have to do here is to then call
‫that dispatch function with the action
‫that we want to dispatch.
‫So, creating a new function here as always
‫and then dispatch and the type of the event
‫will be as we just defined earlier start.
‫And this should actually be enough.
‫So, if we click here now, then the question component
‫should be displayed instead of this.
‫So, let's see, and bam, there it is.
‫So, here, we finished this component and so,
‫actually, we finished what we wanted to do in this lecture.
‫So, we're going to leave the actual displaying
‫of the question for the next one.