‫It's now time for another exercise
‫so that together we can practice state management
‫and Thinking in React in general a little bit more.
‫So together we will build this very simple
‫accordion component where we can open and close
‫each of these items of the accordion here.
‫So when it's closed and we click, it opens.
‫And when it's open and we click, it basically closes again.
‫And each of these items has the title
‫or actually the number here,
‫the title and then the text itself.
‫So this is here a question, and this is an answer basically.
‫And so we have some starter files again
‫which I have linked in this lecture.
‫And the starter files are this array
‫of frequently asked questions
‫and then also this CSS styles right here.
‫So as always, you have two options.
‫You can do it in your own VS code.
‫So then just go here and copy all the relevant starter data.
‫Or of course you can fork
‫now this code sandbox.
‫So basically in order to create your own one.
‫And so now I have created a new one out of the other one
‫and so I can safely change this one.
‫So let's go back here to see what we have to build.
‫And basically the entire thing here
‫is the accordion component
‫and then each of them is one accordion item.
‫And so let's start
‫by actually building these items themselves.
‫And remember that each one gets a number,
‫a title, and some text.
‫So the accordion component
‫has actually already been created.
‫And so now next, let's create the accordion item.
‫Okay.
‫So remember that each item gets a number.
‫It gets a title and the text.
‫And so let's immediately write that here
‫basically as the props that we will receive.
‫And so then we can immediately build with these.
‫So just like before, we will start
‫by building a static version of the app.
‫So in this case of these two components.
‫And then later we add state
‫to the mix in order to actually make the component dynamic.
‫So here we will return a div element
‫and this div has the class name
‫that's coming from the CSS that I provided of item.
‫Then we can immediately close that.
‫And so then we have one paragraph for the number.
‫So that's class name number.
‫And then here let's actually immediately use
‫again this prop that we will receive
‫as soon as we start including this component here anywhere
‫but we can already use that prop as if it already existed.
‫So class name, then let's say text.
‫And again here the same thing
‫that's immediately used, the prop.
‫And then finally this one here for the icon.
‫And by icon I mean this minus and plus right here.
‫So see how it toggles between plus and minus.
‫And for now, let's start with a minus there
‫but we will change that later.
‫And finally, we then have a div
‫which will contain the content itself.
‫So basically the text.
‫So here the class name is content box
‫and then this again is where the actual text goes.
‫And I see that here I have a mistake
‫because this is actually for the title
‫so I'm not sure why I called that text.
‫So the class.
‫But yeah, nevermind.
‫Okay.
‫And now here in this accordion all we need to do
‫is to loop over this array of objects like we always do.
‫And then for each of the objects
‫we want to render one of these items.
‫And actually to make this a bit more reusable
‫let's accept some generic data here basically.
‫And so then here we pass that data in
‫and as the data we use DFAQs.
‫And so then we could reuse the same accordion
‫with different arrays.
‫Okay, this one here should have the class name of accordion.
‫And then here is where the mapping will happen.
‫So that's data.map.
‫And then for each of these elements
‫and we could also call them frequently asked question
‫but let's just go for the generic element.
‫And so as we said before
‫we want to render one accordion item for each of them.
‫And what do we want to pass in there?
‫Well, the title will be at element.title
‫so that's this one here.
‫And then also the text coming from that same object,
‫so element.text.
‫And now we also want the number.
‫So this one here should automatically be
‫number one, two and three.
‫So we can do that very easily
‫by using the index that is also passed in the map.
‫And that's very easy to do because the callback here
‫in the map actually also gets past the current index.
‫So besides the current element
‫it also gets the current index.
‫So as a second argument, so let's call that I.
‫And so then we can pass in as numb simply I.
‫And that's it.
‫All right, so we have something here.
‫Let's just make this a bit smaller.
‫Well, not all of it.
‫Let's maybe close down the side bar.
‫Yeah, that's a lot better.
‫We can make it a bit smaller even.
‫And so let's compare.
‫So here we actually have like 01
‫and then also the textile looks a bit different.
‫So let's see.
‫But yeah, the class names all look correct
‫but now let's just quickly take care of the numbers here.
‫So here we want to have 01, 02, and 03.
‫So let's do some magic here.
‫Let's say if the number is less than nine
‫then here please place a zero
‫and the number plus one.
‫But if not, so right here, then it's just number plus one.
‫Okay, that looks much better.
‫And then here, let's just change this one to title.
‫So that should work.
‫And yeah, and with this let's go back to the original
‫because now we need to start thinking about state.
‫So remember how we can open and close
‫each of these boxes here individually,
‫which basically means that each of these boxes
‫holds their own state.
‫So whenever we click here, you see that the UI changes.
‫So that's the most fundamental thing
‫that we need to think about whenever the UI changes.
‫So whenever there is some update here happening in the UI
‫it means that we need a piece of state.
‫Now, each of these items here operates
‫completely independently from the other ones.
‫So if I open this one here
‫nothing happens to the other two.
‫So I can open all of them at the same time
‫or I can have all of them close, meaning that
‫again, each of them really operates in an independent way
‫which means that each of them must hold their own state.
‫So again, that's because this one can be open
‫but this one as well.
‫And so what that means is that we should now define
‫a state variable in each of these items.
‫So that's right here.
‫And so then we use our friend, we use state.
‫So let's call our state variable is open, and set is open.
‫So we use state which was then automatically imported.
‫So this one right here, make sure you have that.
‫And then by default it will be fault.
‫So by default, we want each box to be closed.
‫So we declared our state variable, and now let's use it.
‫So that's the same three step process as always.
‫We define it, we use it, and then we update it.
‫So basically what we want to do when is open is false.
‫So when this is closed is to not display
‫this content box down here.
‫Or in other words
‫we want some conditional rendering of this part.
‫So let's place it into the JavaScript mode
‫and then let's say is open
‫and then conditional rendering like this.
‫Now, in this case here also this should be a plus
‫not a minus.
‫And so let's also come here
‫and say is open
‫then show the minus,
‫and if not then please show the plus.
‫Close the JavaScript mode.
‫And so with this, we have the pluses showing.
‫All right, now all we need to happen is that
‫of course when we click here, the box should actually open.
‫So you see that with the CSS style
‫I applied this hint cursor here to the entire div,
‫so to the entire element.
‫And so this is where we then want to listen
‫for the click event.
‫So right here on this div.
‫So let's say on click,
‫and then here we will pass in a function
‫called handle toggle.
‫And so let's go define that function.
‫So just like before, we just define an outside function
‫with the keywords of handle here, which is totally optional
‫but it makes it easy to understand
‫that this is a function that will be used
‫as an event handler.
‫And so now here let's use set is open
‫and then we take the current one.
‫So we can just call it current if we want.
‫Of course we can also call it is open.
‫Yeah, anything works.
‫And then we just want to do the opposite.
‫Alright, so that didn't work yet.
‫Maybe let's just reload here, that is sometimes necessary.
‫And yes, that works.
‫And if I close again, it closes, beautiful.
‫Now here we have some errors
‫and that's just because of the key prop.
‫So here we need to pass in a unique key prop
‫and we could now actually use I, which is unique actually.
‫So it's this 01 and two coming from the array iteration.
‫But it's better to not rely on that
‫and instead use something that's truly unique.
‫So that's for example, the title of each element.
‫Close this one here, and indeed it works on all of them.
‫There's just one small detail missing
‫which is that when this is open,
‫we get this green border here
‫and all the text becomes green.
‫So that's just one special class that gets added
‫to the item whenever it is open.
‫So on the item that's right here.
‫So again we want to add a second class here
‫in case that it is open.
‫And so for that we need some more conditional
‫rendering basically, in this case of classes.
‫So here we now need to construct a template string
‫or a template literal, which already has the item string
‫and then here based on a condition,
‫so based on it's open
‫we either want to add open or nothing.
‫And that's it.
‫And that works.
‫Well this kind of didn't become green for some reason.
‫Let's check out our CSS here maybe.
‫Maybe there's something that I didn't do right.
‫Yeah, so here it should be title.
‫Yes, beautiful.
‫And with this, we actually finished this accordion
‫at least for now.
‫So later in this section there is the second part
‫of this exercise where we will make it a bit more realistic
‫where only one of these three
‫can be opened at the same time.