In this video, we will implement our results page.
So actually, when we are clicking next, a lot of times and we are coming to the end, we must show
the result page with our correct and incorrect answers.
So here I'm hitting next and then once again and once again.
And as you can see, we are getting an error.
Why it is happening because actually we are on the end of our array and our current question index can't
be increased.
This is why we are trying to get a question of undefined because this element in the array does not
exist and we need to cover this logic correctly.
So the first question how it will work at all.
And actually my idea is to create one property which we will set to true when we need to show our results
page, which actually means we can jump directly inside our initial state and say here that we have
a new property show results and by default it is false because we are not on the result page.
But it also means that every time when we are hitting next question.
So we are here, we must check if we should set it to true or not.
This is why here inside I want to calculate our results property.
Actually here.
As you can see, we have access to our current state with state property and we can check that our state
dot current question index equals state dot questions dot length minus one.
Why minus one?
Because we are starting our indexes with zero.
So actually this means that this show results property will be true when we are on the last question.
So now we just need to use this property here and override it.
In this case, we don't need to write some additional ifs and we have just a single return, which is
really convenient.
Also, you already saw the problem with indexes.
When we are going out of our array length.
This is why here we need to understand when we need to increase it or not.
This is why I want to create here a property current question index.
And here we want to check if our show results property is in.
True because if it isn't true, we already are out of our array so we don't need to render any questions
or increase our current question index.
So I'm checking here.
If it isn't true, then we don't need to increase it, so I will simply return state dot current question
index and if it is in false, this means we are not at the end, then we must increase it.
This is why here will be state dot current question index plus one and actually this property we can
directly use here inside our return.
Let's check this code.
I'm reloading our application and as you can see here, we have show results false.
Now I'm hitting several times and as you can see, it is still false.
Then here we need to come to our eighth question then I'm hitting next again.
And as you can see, our application is not broken anymore because we didn't increase our index.
Now, as you can see here, our current question index is seven, which is completely fine.
We are at the end of our array and here show results property in true, which means now we can use this
property to render our results page.
This is why.
Let's jump back inside our component of quiz and render our results page there.
So here inside quiz we have all this code and actually this code must be rendered only when we are not
in results page, which actually means we want to render this code with condition and to use conditions
inside react.
We are using such notation.
So here I am opening the bracket and after the div I am closing it.
Now here inside this bracket I can write some logic.
In our case we want to render this only when quiz state dot show results is false.
This is why here I put not and after this variable we are putting end which means when this logic is
in true, then this code will be rendered.
If it is false, then it won't be rendered.
Let's check this out.
As you can see here, by default it is rendered.
Then we are hitting next a lot of times and we see blank screen because this part is not rendered anymore
because we are on show results page now.
We need to render some markup for our results, which actually means here we must write one more condition.
And we are saying here that quiz state dot show results must be true so we don't need bank here now
I am hitting here end and here will be our markup.
So inside round brackets we can say div with class name and here we have our results.
Let's close our div and inside we must write div class name and here we have congratulations.
Let's close this div and write inside.
Also congratulations.
Now after we need to render some results info.
This is why here we have this container with results info.
Let's close this div and inside we want to render.
First of all div with text.
You have completed the quiz and here we need to render how many correct answers we have.
We don't have yet this information from state.
This is why here we can simply render some mock data.
So here we have a div without any class and we can write here you've got here will be the total number
of correct answers.
For example, for of and here we must render a property and actually this property we can already render.
This is quiz state dot questions dot length.
So this is the total amount of our questions.
After this div we want to render our restart button.
This is why here will be div with class name and here we have our next button.
So we have the same class like our next button.
And here I will close this div and just render inside restart.
Let's check this out.
I'm reloading the page.
So we are at the beginning.
Now I'm hitting next question.
Everything is working and here after eighth question I'm hitting next and we see our congratulations
window because actually this part with the question is not rendered.
But this part on the top is being rendered because our show results property is in true.
And as you can see here, we have the information.
You've got four of eight, which means actually this eight is coming already from the state.
Now, the only thing that we need to implement in this video is our restart button.
And actually it will be exactly the same like here with the next question.
So what we want to do here, we want to have our onClick event and we want to dispatch a function because
our component simply need to notify our context that something happened.
In this case, we have this function and we want to write here a dispatch and here we are writing another
action.
And for example, we can write here restart because we know that user clicked our restart button.
So as you can see, this code is exactly the same.
Like for our next question, now we just need to react for it inside our context quiz.
So here we can write after first if one more if and here we are checking for action.
Dot type equals.
And here we have our restart.
So the question is what we want to do with restart.
Actually we want to start from scratch.
This is why here we can simply say return initial state and initial state is all properties that we
had from the beginning.
Let's check this out.
I'm reloading the page now.
We're hitting next question several times.
Here we are on the end.
I'm hitting again and again.
We see congratulations.
Now here is restart button.
I'm just hitting restart and as you can see, our application is coming to our initial state and this
was super easy to implement because with our architecture we can simply reset all our properties to
our initial state.