‫Now, in this lecture,
‫we are going to implement the logic
‫for handling a newAnswer.
‫And to understand what that means,
‫let's check out our demo project here
‫and then let's give a newAnswer.
‫So a newAnswer is basically when we click
‫on one of these options here.
‫So let's do that.
‫And you see that basically three things happened.
‫So first, the correct and the wrong answers are displayed.
‫Second, the points that we got were updated.
‫And third, the next button was displayed down here.
‫So basically, when we click on one of these options,
‫we need to re-render the screen.
‫And so once again, that means
‫that we need a new piece of state.
‫And so that state should basically store
‫which of the options was selected.
‫So in other words, which was the answer?
‫So answer zero, one, two or three.
‫So basically, the answer is just going
‫to be the index number of this option here.
‫So let's come back to our App.js
‫and add yet another piece of state to our initial state.
‫So let's just call that answer.
‫And in the beginning, it will be null.
‫So there will be no answer initially.
‫And so that makes sense, right?
‫And now next, let's then create an action
‫in our reducer to update that answer.
‫So let's do that, well, after this one here.
‫So let's keep them in order.
‫And here, let's call this one newAnswer.
‫So then later, we will dispatch a new action
‫with a newAnswer type, right?
‫And so here, let's return as always the state
‫and then the answer will get set to the action.payload.
‫So very simple stuff.
‫And so now we need to go here
‫into our question or actually into these options
‫because here is where the click on the button will happen.
‫So here is where we will now need to dispatch a new action.
‫So that means that we need to pass the dispatch function
‫into questions or into question actually.
‫So dispatch and then the dispatch function.
‫And we will also need the answer that we gave.
‫So this one we need so that we can then display
‫if the answer that was given was correct or not.
‫So painting it basically with one of these colors.
‫And again, we need to de-structure this first here.
‫So we need our answer.
‫Yeah, so dispatch and answer,
‫so let's grab them here and then passing them in here.
‫So a bit of prop drilling, you can maybe identify here
‫but that's not a big deal if it's like just this one level.
‫So then accepting these two props here and there we go.
‫Now we can from here, dispatch the action.
‫So onClick.
‫So dispatch and the type
‫of this event, well, let's see, I don't remember.
‫So that's newAnswer.
‫And the payload should then be the answer that was given.
‫So newAnswer and the payload again is the answer.
‫Now, what is the answer?
‫Well, remember how we said earlier
‫that the answer is basically the index of the option.
‫So in this case that would be here, index number one, right?
‫And the reason for that is that the correct option
‫is also marked using these same indexes.
‫So I just want to show you that because I think
‫that besides learning the React part, it's also important
‫that you learn how to build applications basically.
‫Now here, our app changed to a different state,
‫so the finished state, but nevermind.
‫So what I was saying is that the correct option here
‫is also using these indexes.
‫And so indeed here the correct option is React.
‫And so that's index number one.
‫All right, so then how do we get the current index here?
‫Well, we can just get it here
‫as the second argument of the map method.
‫So that's just how this method works
‫where the first option is the current element of the array
‫and the second argument is the current index.
‫And so this is all we need.
‫So let's check that.
‫Let's click maybe here this time.
‫And so then when we come to our state,
‫we should have the answer of two.
‫And well, where is that?
‫It's not really anywhere.
‫So let's reload.
‫Maybe I forgot to reload the application.
‫Let's try that again.
‫Ah, and apparently I did.
‫So now we got the answer right here.
‫Nice.
‫And so next up,
‫let's then do some formatting based on this answer.
‫And so that's why these options here received
‫that answer prop.
‫So that stayed right here.
‫So what we're going to do
‫is to basically change the class names here conditionally.
‫So let's create a template literal, and then first of all,
‫let's create a class for the selected option.
‫So here, let's say
‫if the current index is equal to the answer,
‫then add the answer class and otherwise don't add anything.
‫So when we're doing conditional CSS,
‫we should always use the turnary operator
‫so that in the opposite case, so in this third branch here,
‫then we return no string at all.
‫And so you saw that here,
‫the question that we selected
‫actually got this special class
‫where it moved a bit to the right
‫and if we selected this one,
‫well, then that one would get that special class.
‫So that's the first thing.
‫And now we also then basically need to paint them
‫in the right color depending
‫if the option is the correct option or not.
‫So let's again enter here the JavaScript mode.
‫And then let's say
‫if the current index is equal to question.correctOption,
‫then at the class correct and otherwise, wrong.
‫And beautiful.
‫So that's working.
‫And again, let's just check our state here
‫so we see what's going on.
‫So again, each of these options
‫or of these questions actually has the correct option
‫as a property here.
‫So that's number one here.
‫And so number one in this case here,
‫so in this option is equal to the index
‫and so therefore, it was then marked as correct
‫and all the other ones as wrong.
‫Okay?
‫And now we can actually click multiple times here
‫but of course, that should not be allowed.
‫So once the user clicks on one of these options,
‫then it should be locked in.
‫And so we then can no longer click.
‫And so let's just disable the button with the disabled prop.
‫And then here, basically we want to know
‫if there was an answer.
‫So any answer at all would then disable this button.
‫So since we know that the initial state
‫of the answer is null,
‫we can just check if the answer is not null.
‫So if it's not null means that there was an answer
‫and then we want to disable the buttons.
‫So let's try that again.
‫Ah, but we have some problem here.
‫So all our options are already painted, so that's very bad
‫because it gives away the correct option here.
‫And so actually what we did here was not really correct.
‫So basically classifying each of them as correct and wrong.
‫We only want that to happen if there was an answer at all.
‫So basically in this situation, so we need to reuse that.
‫So let's just place that in a special variable.
‫Let's say hasAnswered.
‫Okay, and then let's use that here.
‫And here as well.
‫Now here, this will become a bit confusing,
‫so use a turnary and then another one.
‫So we have nested turnaries, which is pretty ugly,
‫so we could actually do this outside as well
‫but let's just keep it like this.
‫So it is readable if you understand the logic behind this.
‫And so it looks as though now it is correct.
‫So let's select something here.
‫And yeah, now we cannot click on the other ones.
‫And also everything is marked in the correct way.
‫So we selected this one.
‫So this one got the special class, but it is wrong.
‫So it's then yellow and only this one is blue
‫because it is correct.
‫So it has the correct class then.
‫Great, so we took care of one of the three things
‫that should happen.
‫So again, the correct answers should be displayed.
‫Then the user's score should be updated
‫and the next button down here should be displayed.
‫So let's now quickly take care of the second part.
‫So basically that the user's score should be updated.
‫So that is something that needs to again update
‫on the screen, which means
‫that we need yet another state variable.
‫So let's call this points and user starts at zero.
‫Okay, and now where do we update these points?
‫Well, it makes sense that it is exactly
‫in the same place where we received the newAnswer.
‫So right here, we will also update the points.
‫So how are we going to do that?
‫Because, of course, the points should only be awarded
‫if the answer was correct.
‫So we need to first figure out
‫which is the current question.
‫Then if the answer is correct and only then,
‫we want to add the points to the current points.
‫So that sounds confusing.
‫So let's just do it.
‫So first of all, let's figure out
‫which is the current question
‫because we actually don't have that stored in the state.
‫So we only know the index, but not the question itself.
‫So let's grab state.questions at state.index.
‫And so here really we are leveraging the current state
‫that we get into the reducer to compute the next state.
‫So really relying on that current state.
‫So with this, we know which is the current question.
‫And so now we can then check
‫if the current question is equal to the received answer.
‫So that received answer is again action.payload.
‫And now let's check
‫if it is equal to question.correctOption again.
‫So this property that we have used
‫before already here, right?
‫So if that is the case,
‫then we want to add some points to the current points.
‫And so that is state.points plus something.
‫Let's just do one for now
‫and otherwise, the points will just stay the same.
‫So then we will just return again state.points.
‫Okay, now here we are adding one for now
‫but that is not what we want to add in the end
‫because notice again how each of our questions object.
‫Actually no, let's give a lot more space.
‫So each of them has this points property,
‫which is because each of them actually
‫has a different points value.
‫So the easier ones only give 10 points,
‫but then if they are more difficult,
‫well, it's maybe this one.
‫Well, not really.
‫So there are some hard ones.
‫Yeah, like this one.
‫So this one adds 30 points
‫and so we need to get actually that value.
‫So that is at the current question.points.
‫All right, so I understand
‫that this here might seem a bit confusing
‫but this is really just understanding what kind
‫of data we have and then working with that data.
‫And also you notice that here we now have
‫for the first time quite a more complex state updating logic
‫in our reducer.
‫And this is perfectly fine and actually encouraged.
‫So whenever it's possible,
‫we should try to put as much of the logic
‫for calculating the next state right into the reducer.
‫So it's better for this logic here to be in the reducer
‫than in the place where the event is actually first handled.
‫So basically, we could probably
‫also do this calculation right here
‫in the option where we handle the event
‫but that would go against the logic of the useReducer hook.
‫So it's much better to do it like this.
‫All right, so this should be working.
‫Let's check it.
‫So we know that this question is worth 10 points.
‫And so if we select the correct one, then you notice
‫that our points have indeed been updated to 10,
‫so that's zero plus 10.
‫And if we select the wrong one,
‫then our points stay at zero.
‫Great.
‫So, of course, we will later then display these points
‫in the UI.
‫But let's leave that for a bit later
‫because next up, we need to take care
‫of displaying the next button and handling the logic
‫of actually moving to that next question.
‫So basically, when we finish here,
‫then we want to click and go to the next one.
‫And so that is what we will do in the next video.