‫So let's now render
‫and display the current question.
‫So of course, we will not render all the questions
‫at the same time here, but instead, one by one.
‫And so therefore, we need a way of knowing
‫which the current question is.
‫So basically, we need some way of keeping track
‫which question is the current one.
‫And so let's add a new piece of state
‫to our initial state here.
‫And we could call this the current, or the current index,
‫but I would like to just call it index.
‫And this index starts at zero
‫because we will use this index here
‫to take a certain question object
‫out of the questions array.
‫And so the first element of this questions array
‫is element number zero,
‫therefore, our index starts at zero.
‫And so then in the future, at some point,
‫if we want to display the next question,
‫we can already imagine that we will do that
‫by changing this index.
‫So then in the future, when we change that index
‫from zero to one,
‫that should display the next question.
‫So it should then re-render the screen,
‫and therefore, this needs to be a state variable.
‫So that's the reasoning
‫behind why we need this variable right here,
‫or this piece of state,
‫and also why it needs to be state in the first place.
‫And again, it's because it needs to re-render the screen
‫once it is updated.
‫But anyway, let's now take this index
‫to pass in the right question object
‫into our question component.
‫So this component will, of course,
‫need access to that current question.
‫And as we just said, that will be questions,
‫so the array at the current position, which is index.
‫Now here, that is not available
‫because we haven't yet destructured this index
‫out of the state.
‫But there we go.
‫And now let's go to this component.
‫And just like before, if I hit the command key
‫and then click here,
‫it will automatically go to that component,
‫even if it is in another file.
‫So here, let's now receive that question.
‫And then let's display it.
‫Well, first, let's even take a look
‫at the shape of this object,
‫so that we actually know what we are dealing with.
‫So let's come to the console,
‫and as we click here, that should appear.
‫So inside the question,
‫we have the question property,
‫so that's what we want to use first.
‫So here we have basically question.question.
‫And so with this,
‫we get the question already here in the UI.
‫Great.
‫But then we also have this array of the options.
‫And so next, we will want to loop over this array,
‫and, of course, display these options as well.
‫Now, this time, I will not use an ordered list for that
‫because we will not have list elements,
‫but actual buttons.
‫So here, let's call this the options.
‫And so then here we loop over
‫question.options,
‫and then .map.
‫So here, each of them is a question,
‫or actually, it is an option.
‫And so then for each of them,
‫what I want to do is to return a button
‫with the class name of btn
‫and btn-option.
‫Okay and then, as for the text,
‫it should simply be the option itself
‫because as we see, this is just a simple string.
‫So each of the options is just the string
‫and so that's already looking great.
‫Let's just see what we have here.
‫Ah, of course, we are missing the key property
‫so very important for optimization
‫as we have already learned at this point.
‫So the options are unique
‫and therefore, we can use each of them as a key.
‫So as we reload, then let's start.
‫And there is our first question together with the options.
‫Nice.
‫Now here, actually,
‫I would like to split this component in two.
‫So whenever there is a list like this,
‫I personally prefer to have a smaller component
‫in a situation like this.
‫So based on the logical separation
‫of the content of this component,
‫I would say that we can now split this component.
‫So let's grab this entire part
‫and let's create a new component.
‫And actually, we are creating so many components,
‫that it is a common practice
‫to create a new folder called components.
‫And so this is where we then create our components.
‫So let's do this one right here
‫and then I will later put all the other ones there as well.
‫So options.js,
‫and then our snippet again.
‫And here we already have the JSX,
‫so let's place that there.
‫Now here, this is missing the question,
‫but let's, first of all, place all the other components
‫into this components folder.
‫So that's app, the date counter,
‫error, header,
‫loader, main question,
‫and start screen.
‫So we already have a lot of components here
‫and so let's place them all in there.
‫Now of course, we will have a problem
‫in the index.js file
‫because it is still trying to read the app component
‫from the same folder as before.
‫But so now it's in the components folder,
‫so we need to change that here,
‫but then all the other will still work
‫because we are importing them here inside app.js.
‫And so here we are importing them from the same folder
‫and so that's why this still works.
‫All right, but anyway,
‫coming back here to our options,
‫here we now need to receive the question.
‫And so then of course, we need to pass it in there
‫so we need to even import that here.
‫So options
‫and then with the current question
‫and then just importing that here.
‫So import options from,
‫and again, it's the same folder.
‫And let's test.
‫And there we go.
‫Now, of course, when we click here now, nothing happens.
‫And so that's what we will take care of in the next video.