‫From my experience,
‫it's not super hard to understand how state works in React.
‫But it can actually be quite tricky
‫to understand how exactly to use it
‫in practice in different situations.
‫But the thing is, that this is the number one skill
‫that you need to have as a React developer.
‫And that's why I decided to create this extra exercise
‫that we're going to build together now
‫to give you more situations
‫and more opportunities to practice.
‫So let's go.
‫And here is the exercise that we're going to build.
‫And it's actually a small project even.
‫So this is a flashcard project
‫where a flashcard is basically a question on one side
‫and then, when you click it,
‫you get the answer on the other side.
‫So imagine that you can rotate each of these cards here,
‫which is what many people use to study.
‫So if I click here now again,
‫then it'll basically turn the card around again.
‫If I click here, then it opens this one.
‫And while this is open and I click on another one,
‫then you see that one closes and this one opens.
‫All right.
‫So this is gonna be a small, fun exercise
‫which maybe looks very complex to you right now,
‫but actually all we need is one piece of state
‫to control all of this.
‫Now I added a starter file to the link of this lecture.
‫So that's this code sandbox here.
‫And so here we already have an array with all the questions.
‫And once again, that's an array of objects.
‫All right.
‫And so what we're going to build
‫is this flashcards right here.
‫So all you have to do is to fork now with this code sandbox
‫or you can just also copy paste this entire code
‫into your own code editor on your computer.
‫So that's your choice.
‫But what I will do is to now fork this,
‫which will basically create a copy in my own code sandbox.
‫All right.
‫And so let's get started.
‫And the first part is to actually render out
‫these different flashcards like this.
‫So basically only the front part
‫which contains all the questions.
‫So you'll see that each one has an idea,
‫a question, and an answer.
‫But of course, by default, only the questions are visible.
‫So we already know how to render lists.
‫We just enter JavaScript mode,
‫then we take our questions array and map over it.
‫So each of them is a question.
‫And then here we can render some JSX.
‫Now, many times what we do here
‫is to create an extra component.
‫So just like we did in the far away travel list app
‫that we're currently building, but we don't have to.
‫So we can also just return some JSX here.
‫And so that's what we're going to do now.
‫So just another div.
‫And then in there a paragraph with the question.
‫So that's question.question actually, and that's all.
‫Close that and close the div as well.
‫And there we have it.
‫Now what's missing here, is the class name of...
‫flashcards.
‫So as you see, I already created some CSS.
‫So if you copy the code into your own computer,
‫then make sure to also copy the contents of this style.css.
‫Okay, now we see that here we have some problems
‫which are related to the key.
‫Exactly, so each one needs a unique key.
‫And so, well, we can just put that here.
‫So key, and then let's use question.id
‫because these are unique values,
‫and as you know, each element that we render here
‫inside the map, so as a list, needs a unique key.
‫So if I reload now, then these errors will be gone.
‫Okay, so we have now our static parts all built out.
‫Now what we need to do is something to happen
‫whenever we click on one of these components here,
‫or actually, each of these elements.
‫So how are we going to do this?
‫Well, as I said initially,
‫all we need is actually one piece of state
‫and that piece of state will keep track
‫of which question ID is currently the active question.
‫And if that sounds confusing, then let's just write a code.
‫So let's call this the selected ID
‫and then setSelectedId.
‫useState.
‫And then, here we will want to start with null,
‫because by default we want none of the questions
‫to be open in the beginning,
‫so to be selected in the beginning.
‫And so that's what null is for.
‫So null is basically just nothing.
‫So now here we need to import useState from React.
‫All right.
‫And now let's remember the three steps of using state,
‫which I like to always come back to
‫because I think this makes it a bit more helpful
‫to understand how we should approach this.
‫So the first step is to define the state variable,
‫which we already did.
‫Second is to then use that state variable,
‫and third is to update it.
‫So as for the second point, let's now do that.
‫So let's use the selected ID here for something.
‫But well this time this is a bit tricky, right?
‫Like what do we actually need the selected ID for?
‫Well let's maybe make it easier
‫by instead of using null here, using one of these.
‫So one of the actual IDs.
‫So 9103.
‫So if this is the state.
‫So let's imagine that we just clicked on this one here,
‫how to give components memory.
‫Let's say that we just clicked here
‫and so that this is then the state.
‫So how do we want to use this state?
‫Well basically here, instead of displaying the question,
‫we want to display the answer.
‫So we can do that.
‫We can say question.id equals the selectedId
‫and if it is, display question.answer.
‫And if not, well then of course the question.question.
‫And so now here, we actually this time got the answer.
‫So that's the useState hook.
‫And so that's already working.
‫So let's do the same thing for the styling because here,
‫actually this gets like with this red background
‫and so we can use a class that I created for that
‫and edit here to this div.
‫So let's do something similar then.
‫So className, enter JavaScript mode,
‫and then we do the same thing.
‫So if the current question.id is equal to the selectedId
‫then here the class name should be selected.
‫And if not, then nothing.
‫And there we go.
‫So beautiful.
‫Just make sure that you actually understand
‫what is going on here.
‫So as we loop over this array here,
‫each of these elements is one of these divs, right?
‫And in each of these divs we have access
‫to the current question object,
‫and then each of them has one ID.
‫And so what we can then do is to compare that ID
‫with the selected ID.
‫So the one that we have currently selected.
‫And if that is the same, then well it's just what
‫we have written here.
‫So if it is the selected question,
‫so if the selected ID is equal to the one
‫that is in the object, then simply display the answer.
‫And otherwise, in all other cases,
‫well then display the question itself.
‫So not the answer.
‫All right.
‫And now, let's set it back to null.
‫And now, all we have to do is to set the state.
‫So that's the third step.
‫So when do we want to update the state?
‫It's whenever we click here,
‫so in one of these divs.
‫And so that's where we place the onClick handler.
‫So as you see,it doesn't even have to be a button
‫or anything like that.
‫Okay? And now what we are going to do is to
‫create a function here.
‫Just to make our code a bit easier to understand.
‫So let's call it handle click.
‫So for now just the name of the function.
‫So here we need to now then pass in that function
‫right? However, that is not really enough
‫because well, here we will now call set selected ID,
‫but as the name says
‫we now actually need the ID of the question that
‫should become the selected question, right?
‫And so what this means is that this function
‫needs to receive that ID so that we can then set it here.
‫So now we need to call this handle click function.
‫With that I'd.
‫So simply enough question.id.
‫But don't make the mistake of thinking
‫that this is finished.
‫And actually React already gave us here an error.
‫So remember that here we need to pass
‫in an actual function and not a function call
‫like we have here.
‫So this is calling handle, click immediately.
‫That's not what we want.
‫We want to pass in a function so that React can
‫then call the function as soon as the event happens.
‫And test should already be enough, at least for now.
‫So that worked great!
‫And as I click on another one, then of course this one
‫becomes the active one.
‫And let's check out the React dev tools
‫because Code Sandbox actually also
‫has the React tools integrated.
‫So when we come here to the app, or actually flashcards,
‫notice that the state is now 9103,
‫which is exactly this idea.
‫When we click here, it becomes,
‫That should've updated,
‫but apparently it doesn't work that great.
‫So yeah, well maybe, nevermind,
‫let's just close this down again.
‫What matters is that it is working at least kind of
‫because watch what happens when I click here again.
‫So nothing happens, of course, because, well
‫because here we are simply passing in that id
‫and then we are setting that ID as the selected ID.
‫So just as expected.
‫But as we see here, as we click again
‫it actually closes the card again.
‫So this functionality we already have of
‫changing between cards
‫but when we click on it that we don't have yet.
‫So let's do that.
‫And it's not too hard.
‫Basically what we want to do here is to set this ID
‫based on a condition.
‫So we want to say if the question ID
‫is different from the currently selected one
‫then the result here should be the id.
‫And if not, well then set it back to now.
‫Now here there's some problem.
‫Ah, yeah, I have one equal too much.
‫All right.
‫So again, if the question ID is different
‫from the already selected ID, then set the ID.
‫And so that's exactly this behavior, right?
‫But if not, so basically if the question ID
‫is already equal to the selected ID
‫then set it back to null.
‫And so with null, then none of them will be active.
‫And yeah, that works and I think it makes sense as well.
‫So this usage of state here was quite a
‫bit different from what we had before.
‫And so that's why I decided again
‫to include this exercise here by the end of this section.
‫So please make sure to study exactly what is happening here.
‫And then after that, I think you are ready
‫for the final coding challenge of this section.