We actually already implemented our next question button.
But I want to talk once again how it all works so it will be crystal clear for you.
Let's check this out.
Actually, here we have our next button inside quiz component.
So this is just our markup.
And here we have onClick listener.
So when we're clicking on this button, we don't do anything inside component, but we are calling dispatch
and this dispatch is coming from our context.
And here we are passing an action.
Actually, previously I said that this is an object and this is correct, but this object is being called
an action because this action has a type, which means action is something that user did.
In this case, user clicked on our next question.
This is where here we are dispatching next question and our component doesn't know anything regarding
next question at all.
When this code is happening, we are going inside our context quiz and actually we are coming to this
reducer.
So here we will get our state and action and in our case, inside the action type we have.
Next question.
And as you can see here, we are returning our updated state, which actually means here when we click
next question, our state is updated.
And you can see here current question index is one, but it's not all.
You can see already that our question is being rendered.
This is the next question.
And when we hit next, actually, this is already the next question.
So as you can see, it's not working like typical JavaScript with usage of Dom because we are writing
it in declarative way when the whole application is rendered based on the state.
The idea is that all our components are subscribed to some state.
In our case here we are actually subscribed inside our question for this quiz state.
And every single time when Quiz state is changed, this component is being rendered.
This is why this current question, that question is also being rendered.
So actually here we just say on what we are reacting from our state and we are not saying then for example,
when we clicked our next button, we must recalculate our current question and render this component
and this change everything because we are not writing in React like in typical JavaScript applications,
we just subscribe to the state and we say what we are changing inside state and react will rerender
everything for us in this case when we are clicking next question, we just updating current question
index in our state and then all our components can react on it.
And also you can see on the top that we are now on question four from eight, which means this information
is also updated inside our quiz component.
And here is the last important part that you need to remember.
As you can see here, I returned a new object inside our reducer, and this is a must.
When we are writing some code inside reducer, we must always return a new object.
We can't simply mutate object.
I can't write here.
State dot current question index equals to because this code won't work.
This is related to how react is checking the differences between new object and all object.
So actually we must always return the new object here.
In other case, react.
Can't really see that we changed our state.
This is why actually in all our cases we will simply use an empty object with spread operator where
we are spreading our old state and then we simply overwrite some new properties.