If you already got to this video, you are awesome because actually we already did the most difficult
part of the application, its configuration.
Now it will be much easier.
And in this video I want to talk about rendering of our questions.
As already said here, inside source, we have our data JS file and this is the array of our questions
with answers.
So actually we can just take this data and render them inside our component.
But this is not the best approach.
Why?
Because actually we have our state, as you can see here, this is our state.
Now we have here questions and current question index and it actually makes sense to put all our properties
from our application in a single place.
And this is our state also.
If this data will be inside our state, then we can access them everywhere without need to import this
file in every single component.
This is why I want to jump inside our context quiz.
And here we have our questions and we know that we just want to take this array of questions from data
file.
This is why here on the top we can say import questions from and here is the path.
So we need to go out and here we have our data file.
And now here I can simply write questions.
And if you don't know, this is the short form of writing questions, equal questions.
So this is exactly the same.
So in this case, we are setting inside our initial state our questions and now this questions from
this mock file are inside our state and we can use them everywhere.
Let's check this out.
As you can see, here is our quiz state.
And here we have our questions.
And now this is the array of our questions from this file.
Now let's render our first questions.
As you can see everywhere here, we have mock data, which means we need here to render data from our
state.
For this, I will jump directly inside our component question because this is where we are rendering
the text of our question.
And as you can see here, we don't have any information of our state, which actually means we must
do exactly the same what we did inside our quiz.
As you can see here, we have this quiz state with dispatch.
So we must write exactly the same code here inside question if we want to get our state so here we can
write that we need our quiz state and for this we are using usecontext and we want inside to provide
our quiz context.
And as you can see on the top, I have two imports.
First of all, usecontext from React and secondly, our quiz context.
And in this case, now we can console.log our quiz state inside question component.
Let's reload the page.
As you can see here, this is our question component and this is our state, which means we have access
to our question and now we can render it inside here for this.
We can actually remove this text inside our tag and render here a variable and render variables inside
react where using brackets.
Now inside we can write here quiz state and we actually need to render our question by index.
And as you can see here inside our state, we already made an index.
So current question index is zero because we are on the first question and then when we hit the next
button, we will increase this current question index, which means our question component will always
know what it needs to render.
So in our case here we can say quiz state dot questions and this is the array of our questions.
Now here we need to provide the index.
So here we need to write quiz state dot current question index.
So here we are getting the current question.
And now from it we need to write just dot question.
Let's check this out.
I'm reloading our application and here you can see the text.
What does CS stands for?
And this is actually the text of first question, which means everything is working fine, but it looks
really ugly because we wrote this construction directly inside our markup.
It's much better to just create additional property here so we can say that here.
We want to have our current question and inside we want to assign everything that we have here and instead
we can write here current question, dot question And I will just put this code here.
In this case, it's much easier to read because first of all, we are creating a variable and then here
we just use it.
Let's check this out.
As you can see, everything is working as expected as we already implemented our questions array here
inside state.
We can change this number.
As you can see here we are rendering question then.
This is current question index and this is our length of array of questions and we can just take this
information from state so we know in what question we are and the total number of questions.
This is why.
Let's jump back inside our component quiz.
And here let's first of all clean it a little bit so we can remove all this console logs.
We don't need them.
And now here, instead of this part, we can render.
Correct?
Properties.
This is why here instead of one, we need to render current question index plus one.
Why plus one?
Because actually indexes are starting from zero.
But on screen we want to start from one.
This is why here we can write quiz state dot and here we have our current question index plus one.
Let's check this out.
As you can see in browser, it is still one, which means it is rendered correctly.
And now here after slash, we can render one more property.
So here we'll be with state dot questions and this is our array.
And after this we want to say dot length.
In this case, this will be the total amount of our questions.
Let's check this out.
We have here one and eight because actually we are on the first question.
And in total we have eight questions, which means everything is working as expected.
And as you can see, it is super easy to render information from our state in all our components because
we can simply with a single line, subscribe to our context and then we simply use this quiz state and
render information that we need inside our components and our components.
Don't know anything about business logic or what is happening with our state.