‫To practice state a little bit more,
‫let's now implement the open and close functionality
‫for our component.
‫So looking at the demo here,
‫what we want to implement now is this functionality
‫that when we click this button here,
‫then this part of the component disappears,
‫and then when we click it again, then it is back.
‫So since this is something that changes on the screen,
‫that means that we need a new piece of state.
‫Let's first comment out this other state that we have here
‫so that we create it for our experiment.
‫I will not completely delete it,
‫just to keep it as a reference here.
‫But anyway, let's now create a new piece of state.
‫So this is going to be called isOpen,
‫and then again the convention for the setter
‫is to call it set
‫and then the name of the state, so setIsOpen,
‫so equal useState,
‫and by default, our component should be open,
‫therefore, we pass in value of true.
‫So isOpen starts as true,
‫and so that's then our default state value
‫for the isOpen state.
‫So that's the first part of using state.
‫The second one is to then actually use the state variable
‫in our code.
‫So what do we want to achieve with this state variable?
‫Well, whenever it is true, we want this here to show.
‫And if it's false, we don't want this to show.
‫And whenever it's false, we don't want this to show.
‫So what this means is that we need conditional rendering.
‫So let's do that.
‫Now we cannot wrap all of this here
‫into JavaScript mode now,
‫but let's still try.
‫So I selected all of it
‫and then I will open the curly braces
‫to enter JavaScript mode.
‫But this will not really work
‫because this can only be done inside some element.
‫So for example, we would need a div here.
‫And so then here, close it.
‫However, React is still not happy.
‫So what do we have here?
‫Ah, test is not defined.
‫So that's because we just removed
‫this piece of state here from before,
‫so let's just comment this out and give it a save.
‫And again, we first needed to create
‫this div element here outside,
‫basically to start our JSX.
‫And so then inside that JSX
‫is where we can enter the JavaScript mode.
‫And we need this JavaScript mode here
‫because now we will use our isOpen.
‫And then as for the conditional rendering,
‫let's simply use the end operator,
‫give it a save, and that's already it.
‫So whenever this is true,
‫then this second part here will be returned.
‫And when it's false, then only false will be returned.
‫So that's just what we learned in the previous section.
‫All right.
‫Now since this is true, nothing happens here,
‫so this is still visible, but if we were to set it to false,
‫then our component should disappear.
‫Yeah, so it's gone.
‫And therefore what this means is that this is working.
‫So let's set it back to true,
‫and with this, we finish the second part of using state.
‫And now the third part of using state
‫is to actually update the state.
‫So for that, we need our button here in the corner
‫and for that, we need to write some more JSX.
‫So let's do that here.
‫So button with a className of close
‫and then here, we can use an HTML entity of times
‫which will basically write an X.
‫There we go.
‫And now we need our event handler.
‫So for that, let's again use the onClick prop,
‫so to directly attach the event handler onto this element.
‫And this time just to show you,
‫let me actually create a function in line here.
‫So instead of creating a handle function out here
‫like these two,
‫I will now define the function directly here.
‫So just to show you that sometimes this is also what we do
‫especially when we have some very simple logic.
‫So we need to create a new function,
‫and now what do we want to do here?
‫Well, we want to update the isOpen state.
‫So set isOpen,
‫and then again, we need to pass in the new state,
‫so the updated state.
‫And what should that be?
‫Well, it should always be the opposite of the current state.
‫So if this open is true, it should become false,
‫and if it's false, it should become true.
‫And the way we do that is by using the not operator.
‫So again, that's just common and standard JavaScript.
‫Okay, and this should now already work.
‫So let's just reload here to get rid of that error.
‫And yes, beautiful.
‫That's working nice.
‫So our view is updated, so it's re-rendered.
‫And so then after that re-render,
‫isOpen is no longer true,
‫but it's false.
‫Therefore, then this entire part here of JSX
‫is no longer rendered, right?
‫But then when we click again,
‫this function here is called again,
‫which will then switch isOpen to the other state.
‫So from false to true, in this case.
‫And so updating this piece of state
‫will then cause React to re-render the component.
‫This time with isOpen to true.
‫So when React then sees this piece of code, isOpen is true,
‫and therefore this JSX is then returned.
‫And so with this,
‫we update the view right here in our application.
‫Great.
‫Now what I want you to notice about this is that...
‫Let's change the state here.
‫So again, with this here, we change the step state,
‫which right now is at number 2.
‫And now if we toggle this state,
‫so if we change this state and change it again,
‫you see that React did indeed remember the state of the step
‫even though we did re-render this component multiple times
‫in between, right?
‫So if we set it to 3, and then again,
‫I can open and I can close, which means that this component,
‫so this view here has been reordered two times,
‫still it will remember this other piece of state.
‫So the 3 is still here.
‫And so that's why we say
‫that state is like a memory of the component.
‫It can hold this information over time
‫even though we render and re-render it over and over again.
‫Great.
‫So with this, I hope you start seeing
‫how we can use state in different situations
‫and for different things in practice.
‫Now, just one small thing that we could change here,
‫and this has nothing to do with state,
‫is that we actually don't want to return
‫just one element here.
‫So we want to return basically both,
‫this part here and the button.
‫And so this means
‫that this is a great use case for a React fragment here.
‫So before I do that, let's just inspect.
‫And so indeed, we have our root
‫which is basically everything,
‫so the entire app.
‫And then in there, we have this div, which is this one.
‫But again, let's say we don't want that.
‫Let's say, we just want to have the button
‫and then this steps div.
‫So let's remove this from here and from here.
‫And so now we have remember a fragment.
‫So that's like the root of this JSX element here
‫which will then disappear in the DOM.
‫So if we take a look now,
‫then we only have this button and the step div.
‫So again, whenever you are in a situation like this,
‫so what you need a piece of JSX to return two elements,
‫then the fragment is great for that.