‫Let's now conditionally display
‫and hide the new friend form.
‫So basically, the functionality that we're looking
‫for is clicking on this button will display the form
‫and change the text to Close,
‫and then when we click again,
‫it will just hide the form again.
‫So, let's think about this.
‫Something should change in the UI
‫as we click this button, right?
‫Or in other words, the UI needs to be re-rendered
‫as a result of the event of clicking that button.
‫And so that is a very good sign
‫that we need a new state variable.
‫So let's go back here and then let's think
‫about where we actually need that state variable.
‫Well, basically we want to display
‫and hide this form here based on that state variable.
‫And where do we do that?
‫So where do we display the form?
‫Well, it is right here.
‫So, right here in the app component.
‫And so this is where we now place our new piece of state.
‫So let's call it showAddFriend
‫and setShowAddFriend.
‫We could, of course, have used
‫some shorter variable names here but you shouldn't be afraid
‫of making your variables pretty descriptive.
‫So use state, and by default the form should be hidden,
‫and so we set this to false.
‫And once again, it's important that VS code automatically
‫imported useState from "react."
‫So make sure you have that line right there.
‫So, we have the first step
‫of creating the state variable with the useState hook.
‫Next up, let's use it.
‫And we will use it
‫to conditionally render this piece of JSX,
‫so just this one component here.
‫And for that we can again use the end operator
‫with short circuiting.
‫So, showAddFriend
‫and formAddFriend.
‫And so now, it is gone.
‫So that's no longer here, but if it was true,
‫then it should show up and indeed, there it is.
‫Now okay, and with that in place,
‫let's now go to the third step, which is updating the state.
‫So, when do we update the state?
‫Well, it is when we click here on the button.
‫So that's this button right here.
‫And so let's again specify the onclick handler.
‫Now of course, this button component here doesn't have the
‫onclick property, right?
‫Only the native HTML elements, so for example this div here,
‫or the actual button, does have the onclick property.
‫So, let's actually cut it from here
‫and place it a bit closer to the app because...
‫Or actually even before,
‫'cause this is our only reusable component,
‫so let's place it a bit separately.
‫But anyway, as I was saying,
‫this button here can of course accept the
‫onclick prop because it is an HTML element, basically.
‫Not technically, but we can think of it as that.
‫So here we can say onclick,
‫but again our custom button component
‫doesn't have that prop.
‫However, of course we still want to specify onclick here.
‫Right?
‫And so, what we can do is simply,
‫well, accept that here as a prop.
‫And this is actually exactly what we did
‫when we built our first reusable button
‫in the steps component.
‫Remember that?
‫But anyway, now here it's as simple as then passing
‫that onclick right here.
‫And now all we have to do is to pass in the function
‫that we want to be executed when the click happens.
‫So, we will create a new function
‫called handleShowAddFriend.
‫So, let's copy that, and then, as always,
‫let's create a new event handler function right here.
‫So, what should happen here?
‫Well, we want to change the showAddFriend state,
‫and for that we use the setter function.
‫And what we want to do is to always set the showAddFriend
‫to the opposite as it is right now.
‫Or in other words, the new state will depend
‫on the current state.
‫And so as always, or not always, but as many times,
‫we use a callback which gets as an input
‫the current state, and I will just call it show here,
‫and then the new state will be the opposite of that.
‫Again, any name here would work, but while we don't have
‫to write the entire thing here,
‫let's just go for something short.
‫And if I click here, beautiful.
‫So, that works perfectly,
‫and now all we have to change is the text here
‫when we click.
‫So now when the form is open, it should say close.
‫And so, that's just some more conditional rendering
‫right here in the button actually.
‫So let's wrap this here into JavaScript mode,
‫and then let's say showAddFriend.
‫If so, so if it is currently true,
‫then we want to display close
‫and otherwise then this other string here
‫which says Add Friend.
‫Give it a save, and yes, it says close,
‫and now back to the original Add Friend.
‫Nice!
‫So, we are now able to display and hide the form
‫but of course the form doesn't work yet,
‫and so let's take care of that in the next video.