‫Let's now take everything that we learned
‫throughout this section in order to make the accordion
‫that we started building earlier a bit better
‫and a bit more real world.
‫And here it is.
‫So just like before, when I click on one of the items,
‫then it'll open, but when I click on another one,
‫then only this one stays open
‫and all the other ones are closed.
‫So basically, what this means is that now each of the items
‫no longer controls whether they are open or not.
‫Instead, it is now the accordion
‫who knows which of the items are opened,
‫and then only that item, basically, is allowed to be open.
‫So for example, if item number three is the one
‫that's currently opened, then number one, two, and 23
‫need to be closed.
‫So again, all of these items here need to know
‫which is the currently open item, and so that means
‫that we now need to move our state from the item
‫onto here, the accordion.
‫Now, I still have the code here from part one
‫of the exercise, and to let me know, fork this,
‫so I can basically leave the other part unchanged.
‫But you can totally also work on top of version one,
‫so then you only have that one.
‫So let's now remove this piece of state, because again,
‫now each item no longer controls whether it is open or not.
‫And then we get a bunch of errors,
‫but that's not a problem.
‫For now, at least.
‫So here, let's now create that piece of state
‫I was talking about, which will be current open.
‫And so here we will store the number of the item
‫that is currently open.
‫Set is open use state, and we will start with null,
‫so then none of them will be open in the beginning.
‫So again, this curOpen state variable will basically
‫hold the number, so this number right here,
‫of the item dead is currently open.
‫And so then we pass that curOpen into the accordion item,
‫and then from there, it can calculate
‫whether it is currently open or not.
‫So let's do that.
‫Let's pass curOpen in.
‫So we use a prop called curOpen to pass that in,
‫and then we also need to pass this setter function in
‫so that then, down here in the item, we can set
‫the current item to the one that has been clicked.
‫And here, let's use the convention we used before,
‫which is to start with the on prefix.
‫So let's say onOpen, setIsOpen.
‫And now here, let's then receive those props.
‫So, curOpen and onOpen.
‫Here, let's for now just comment this out
‫to get rid of this error right there.
‫And then here, as I was saying, we can basically calculate
‫whether this item is currently opened or not.
‫So we can say, again, isOpen,
‫so bringing back the variable name from before,
‫and then if the number, so if the number of this item
‫is equal to the currently open one.
‫So in that case, isOpen will be true,
‫and then it will be, well, displayed as open.
‫So let's change this here from null to one.
‫And so, that works.
‫So remember that this one add one,
‫and so this is zero, one, and two.
‫So if I said two, then that one is open,
‫and then with zero, the first one is open.
‫Great! So, we created a state variable,
‫we used it in the UI, this time by passing it
‫into the item, and then using it to compute
‫whether the item is currently the open one or if it's not.
‫All right, let's set this back to no,
‫because of course, now we want to update the state
‫by clicking on each of these.
‫So that's right here, so let's get rid of all that,
‫and then let's use our onOpen function.
‫And here it's very simple.
‫All we want to do is to pass in the number.
‫So for example, if we are here in item number one,
‫then when we click, onOpen will run with number one.
‫And remember that onOpen is basically set isOpen,
‫which should be called set current open.
‫All right, so we run it with number one,
‫and so then the state curOpen becomes one,
‫and then what happens down here again
‫is that one is equal to one, and so then that item
‫will become open and all the other ones will stay closed.
‫For example, this one here, item zero.
‫Well, item zero is different than one,
‫so isOpen is false.
‫And that works beautifully.
‫Great! And I know this can be pretty confusing,
‫because we're passing states up and down,
‫but this is basically just the idea of lifting up state.
‫So before we had the state right here in each item,
‫but then suddenly, all of them need to know
‫about the current state, and so therefore we can say
‫that we lifted state up to the closest parent.
‫All right, so after this exercise is done,
‫please take some time to analyze the data flow here
‫in great detail.
‫I'm just moving a bit faster here because we already learned
‫about all of this and this is just an exercise.
‫Okay? Now, next up, what I want to do is to use
‫our knowledge about the children prop.
‫So instead of passing the text in here, like this,
‫it's actually a lot nicer to define the text
‫basically as content.
‫So let's pass that text in here, so el.text,
‫and let's close this.
‫And indeed, now the text is temporarily gone.
‫So we no longer need this prop here,
‫but we need the children prop, which I'd like to add
‫either to the end or to the beginning of this list.
‫And then here, that's no longer text, but children.
‫Yeah, that works great.
‫And with this, we are a lot more flexible
‫when it comes to the kind of content
‫that should be displayed in each of the items.
‫So let's add one manually here.
‫So that's where that 23 comes from in the demo
‫that I showed you earlier.
‫So outside this loop, let's now create just one,
‫one test one here, test one,
‫and this would actually be a string, I guess.
‫The number, let's say 22.
‫Here, let's again repeat the title.
‫And as for the content, let's just come here and copy this.
‫You can write it by hand if you want,
‫or you can just write, really, whatever you want.
‫So just wrapping this here in a P, this one in a UL.
‫At each of these here, simply one LI.
‫So just, I mean, this is not really necessary.
‫This is just to show you.
‫Okay. And so, if we click here now, you see that we are able
‫to pass in this entire JSX as the content.
‫And so that's, again, thanks to the children prop.
‫So here, of course, we only have text, but yeah,
‫here we have this entire piece of HTML, basically.
‫And of course, our entire functionality here
‫of the accordion still works just like before,
‫so we can only have one of them open at the same time.
‫Now, there's just one small thing missing,
‫which is that when we click here, on an open one,
‫it doesn't close, right?
‫So probably you can see that for yourself,
‫and so what we need to do now is to basically
‫set the state to null whenever it is opened already.
‫So when we click here and it is already open,
‫then the new state, so the new current open,
‫should become null, and only otherwise
‫it should be the number.
‫And so that will fix it, indeed.
‫Great! So, that exercise is finished as well,
‫and I hope you found it useful.
‫And now, as I said before,
‫please take some time to analyze the code
‫and the data flow right here in this component.
‫And then, once you're done, you are ready
‫for the mandatory coding challenge in this section.