‫Now in order to make our form work
‫the first thing that we need to do is to add the ability
‫of the user selecting a friend.
‫So whenever we click here on select,
‫it'll then open up the form
‫with the information about this user.
‫So here is the name of the user
‫and yeah well that's really all that we need.
‫And then here you also see
‫that the selected friend is marked here
‫with this orange background and button text
‫changes to close.
‫And then if we click on another one
‫then the information of this friend is passed in here.
‫So basically what we want is that whenever we click select
‫on one of the friends here in this list component
‫we want that information to pass here
‫into this form component.
‫So how do we do that?
‫Well, basically we want this component right here.
‫So this friend component, we wanted to communicate
‫with this form component, right?
‫So to basically pass it some data.
‫But as we can see here in our own componentry
‫those are actually sibling components
‫and actually even worse than sibling components
‫because the friends are inside the friend list
‫and friend list itself is then a sibling component
‫of the form.
‫But in any case, since these two now need to
‫share some state,
‫so basically they need to share this friend object
‫that was selected here.
‫We need again some lifted up state.
‫And so the first common parent is again the app component.
‫And so let's in here create a new piece
‫of state called selected friend.
‫And then set selected friend.
‫And here by default we will have null.
‫So basically no object at all
‫which means that no friend is selected.
‫And now let's start using this new piece of state here
‫because when there is no friend selected
‫which is currently the case, since this is null
‫then we don't even want this form here to show up, right?
‫So let's go here into our JSX
‫and let's conditionally render this form.
‫So based off the state
‫let's say selected friend and tender form.
‫So right now selected friend is null
‫and so the end operator will short circuit
‫and will not display anything.
‫And so then it's gone.
‫Great, so we created the state
‫we used it already a little bit
‫and now we need a way of updating it.
‫And so that of course is going to happen whenever
‫this button here is clicked.
‫So let's actually create a handler function again right here
‫in the component that actually owns that state.
‫So a function that we will then pass down via props
‫as we have been doing also with the other functions.
‫So let's call this one handle the selection.
‫And so this one should receive a friend object.
‫So all this we'll do is to set the selected friend
‫to different object that it will receive.
‫All right, and so this is the function that will get
‫called whenever we click on this button.
‫And so then whatever button is clicked
‫the associated friend object will be set
‫as the currently selected friend.
‫Alright, so let's pass that down.
‫And here this is getting a bit confusing.
‫Let's just add some spacing between all of these.
‫And so let's pass,
‫let's say on selection
‫will be handled with handle selection.
‫Okay, and now in the friend list we need to receive that,
‫so on selection but it is actually not even this component
‫that needs this
‫but the friend itself.
‫So here we can just pass it through this component by saying
‫on selection as a new prop here should then be passed here
‫into the friend.
‫All right, and so now this is where
‫we will use this function.
‫So that's right here on this button.
‫So on click and then let's specify
‫or function here because we want to call now,
‫well not this.
‫So we want to call on selection
‫and pass in the current friend.
‫And that's it.
‫So whatever button here is now going to be clicked
‫it'll take the current friend
‫and it'll save it into the selected friend state.
‫So that's the same logic as before with some lifted upstate.
‫Then we create a handler function which updates that state
‫and then we pass that handler function down via props.
‫And so now when we click here
‫that should actually immediately open up the form
‫and indeed it does.
‫Alright, now there's still some things missing
‫but this is already great.
‫Now what we need to do next is to then actually
‫pass debt selected friend object here into the form
‫so that then here we can display the correct name.
‫So that doesn't sound too difficult.
‫And so it's right here.
‫So selected friend should be equal to selected friend.
‫Then let's come down here,
‫let's receive that selected friend
‫and then we can use that here.
‫So selected friend dot name
‫and immediately you see Sarah there.
‫So that's great.
‫Let's just use it here in the other places.
‫So that's right here and right here.
‫Nice, and if we click another one, watch what happens.
‫Yes, it changes to Anthony or to Clark
‫or whatever other friends that we have in our list.
‫Beautiful, so that's working already.
‫Really nice.
‫Now the next step is to then basically mark this one here
‫also as selected and changed the button text here to close.
‫So just as we have here,
‫so you see that here we have this nice background
‫and here the text has changed as well.
‫So how do we know inside
‫of each friend if it is currently selected?
‫Well first of all
‫we will have to pass in the currently selected friend.
‫And so then we can compare that with each friend.
‫So with the friend itself
‫but that's easier to understand in code.
‫So as I said, let's come here into the app
‫and let's pass the currently selected friend in as well.
‫So selected friend equals selected friend.
‫And now as we save prettier puts each
‫of these props into its own line.
‫So this makes it a lot easier to see what's going on here.
‫But anyway, the friend list now receives
‫the selected friend.
‫So let's add that here.
‫And then once again, we don't need it directly here
‫in the list, but we will need it
‫inside the friend so we can just pass that through here.
‫Selected friend equals selected friend.
‫And by the way, whenever this happens,
‫so whenever we have a component
‫that doesn't actually need a prop
‫but all it does with the prop is to pass it down
‫into one of its children, we say that we are prop drilling.
‫So in this case that's not a big problem
‫but sometimes we need to pass some prop
‫through like five or six levels.
‫And so then it becomes really problematic
‫and we then need to solve that problem.
‫But here, that's no issue.
‫I just wanted to already prepare you
‫for what's ahead basically.
‫So at some point we will talk about that in detail.
‫But anyway, now here we can compare
‫that selected friend with the current friend basically.
‫So let's say is selected.
‫And so here we want a Boolean.
‫And so we can simply do selected friend dot ID
‫equal to friend dot ID, and that's it.
‫So now we can use this to conditionally define
‫a class name here
‫and here let's now use JavaScript mode again
‫so that we can say is selected,
‫then add the class of selected
‫and if not, then no class at all.
‫All right?
‫And you see
‫well actually you don't see this is the demo app
‫but you see it here.
‫So this already got now the nice background color
‫and if we select this one
‫then it changes here to this other friend.
‫And so that's simply because this ID here of this friend
‫is now exactly the same ID of the one that we have selected.
‫And now all we need to do is to change that text error
‫for closing until that's down here.
‫So is selected and if so it should be close
‫and otherwise select.
‫And yeah, there it is.
‫Great,
‫so that's working.
‫But what's not working is that when we click here again
‫is that this is not closed.
‫And that makes sense because nowhere we are saying
‫that when we click here again
‫that the state should be back to null.
‫And so that's what we need to do next.
‫So here where we handle the selection, basically
‫when there is already a front selected, so which means
‫that this year is open, when we click here again
‫we want to change the selected friend back to now.
‫So back to the initial state basically.
‫And so here now we need to do something else.
‫Let's just comment it out.
‫And so now this will actually depend on the current state.
‫So let's just call this the selected.
‫So we're currently selected here
‫in this callback is just called selected
‫so that we don't have to write so much.
‫Then here we can say if the selected dot ID is equal
‫the friend dot ID that we're passing in,
‫then let's set it back to now
‫and otherwise then set it to the past in friend.
‫Alright, so whenever the currently selected,
‫let's actually change this here to to cur
‫which stands for current.
‫So if the currently selected dot ID
‫is equal to the friend ID
‫so the friend that is passed in
‫then that means that it is actually open
‫so that right now the form is being displayed.
‫So in that case, we want to actually close it.
‫And so then we set it back to now, right?
‫So let's try that and well, we got a bug
‫so let's see what that is.
‫And yes, this is what I was expecting.
‫So we cannot read the properties of null
‫right here in the friend.
‫So right here.
‫And so that is because right now the selected friend is null
‫isn't it?
‫And so on null, we do not have the ID property.
‫And so therefore then this breaks.
‫But fortunately for us in modern JavaScript
‫we have optional training.
‫And so this is very easy to solve.
‫And if you're not familiar with the syntax, then just
‫go back to the section where a review essential JavaScript.
‫Now here, this friend will always exist.
‫And so here we don't need optional training.
‫So we will never run into problems there.
‫But let's do the same up here as well
‫because again the currently selected does not always exist.
‫I mean sometimes it's null and then this doesn't work.
‫Okay, so we select it, then we select this
‫and if I click again, which is what we just implemented
‫then beautiful, the form disappeared.
‫We have no bugs here and everything is back to normal.
‫Great, and now just to finish
‫let's handle one small edge case.
‫So let's say that we decided to add a friend
‫but then for some reason we don't
‫we're not interested anymore in this.
‫And then we click here to open up this form.
‫So then we have both of them open at the same time,
‫which looks a bit weird.
‫And so let's automatically close this form here
‫whenever we open this one.
‫And so this will then again show you the huge power
‫of state.
‫So all we need is one line
‫of code right here where we handle this click.
‫So all we have to do here
‫in handle selection is to select the friend first
‫and then we set show at friend
‫always to false.
‫So let's reload that.
‫So I open the form, then I select Anthony.
‫And so that closes this one
‫and opens the one that we're interested in.
‫Great, and with this
‫we are now ready to actually make this form here dynamic
‫right in the next video.