4.4 Deleting a Guest
You can now add as many guests to your guestbook as you would like. But we don't want it to fill up too much. Let's learn how we can start to delete some of the "unwanted" guests.
1.Getting Started4 lessons, 16:04
2.Creating the Guestbook Components4 lessons, 26:13
3.Using Hooks in Functional Components2 lessons, 12:28
4.Creating and Editing Guests8 lessons, 52:32
5.Conclusion1 lesson, 01:40
4.4 Deleting a Guest
Now that we can add guests to our GuestList, one of the simplest operations that we can talk about next is deleting or removing a guest from our GuestList. So let's say something went wrong, or someone signed in for the wrong person, and then we wanna delete it or whatever the use case is. Now I wanna be able to remove something from that GuestList. Now, just like we were handling the scenario in communicating between components in the previous lesson when we were creating guests, we're gonna do something similar when it comes to deleting. So now when I'm in my GuestList component, when I come down here to one of these buttons and I click on the Delete, I wanna handle that in a certain way. I want to communicate up to the app component that something has been deleted and then handle it appropriately. So just like we did before, we're going to begin with creating a handler function. So we'll say const deleteGuest, and in this case, will deal with the id. So the input is going to be the id. And then we'll come down here, and really, all we need to do is filter our result. So in this case, I'm simply going to say setGuests. And then the value that I'm gonna pass in is going to be guests., I'm going to use the filter function. And I'm gonna say the guests, for each guest, I wanna make sure that the guest.id is not equal to the id that was passed in. And that will ultimately filter out the one that we have selected for deletion. So once we have this deleteGuest function, we'll come down here to our GuestList, and now I wanna pass that in as a property or as an attribute. So we'll say deleteGuest is going to be equal to deleteGuest. We'll save that. And then we can come back to our GuestList component. And then we'll come down here to the Delete. And we could create another event handler up here and we'll call that, and then we'll call the props.deleteGuest. But what you could also do if you don't wanna go that far is you could come down in here and you could simply say, onClick for this particular button, I want to execute a block of code here, which is really going to be a function. So I can say props.deleteGuest. And I can say I want to delete the particular guest that's being iterated through here. I wanna delete the one with the particular id of this guest. So once I do that, I can now hit Save. And we should then re-render our application. And if I were to come in here, I can hit Delete, and we actually delete the guest from the GuestList and we can now see we have no guests. And then I can go ahead and add another one in here. I can simply say John Doe. Street in Somewhere, Illinois, put in some data. Really doesn't matter what it is at this point, and simply say Add New Guest. And we'll go ahead and get that information in there. So now we can start to add guests to our GuestList. We can delete them from our GuestList. We can see that we have no guests. I can refresh this and just get my default data back and you'll see my default data. But now the next thing that we wanna be able to handle is the editing. Now there's many different ways to do this. And I'm gonna show you kind of an interesting mechanism so we can have a couple different components that kinda look and feel the same that we can swap out and conditionally render based on a current state of our application. So let's start to look into what it takes to edit a guest within our application.