- Overview
- Transcript
4.7 Editing a Guest
Now is the payoff for all your hard work. In this lesson, you'll get see a full roundtrip of data in your app so you can edit the information of an existing guest.
1.Getting Started
1.1Introduction01:01
1.2Prerequisites03:06
1.3Creating a React App08:22
1.4Adding Bootstrap03:35
2.Creating the Guestbook Components
2.1Basic App Component Structure07:19
2.2Create a Guest List Component04:53
2.3Passing Data to a Child Component08:58
2.4Creating a Guest Component05:03
3.Using Hooks in Functional Components
3.1Introducing the `useState` Hook05:28
3.2Lifecycle Events With the `useEffect` Hook07:00
4.Creating and Editing Guests
4.1Creating a Form to Add Guests06:07
4.2Handling Input Change Events08:15
4.3Handling Form Submissions09:39
4.4Deleting a Guest03:39
4.5Create a Form to Edit Guests06:34
4.6State Transitions and Conditional Rendering09:58
4.7Editing a Guest04:20
4.8Introducing the `useRef` Hook04:00
5.Conclusion
5.1Conclusion01:40
4.7 Editing a Guest
Now it's time for us to tie everything together by enabling this Edit button in our Guest list to say, whenever I click this, I want to trigger an event up to my app component. To then display everything over on the left hand side and then be able to allow me to update the information. And let the information propagate back over to my list. So let's come back over to our code. And the first thing that we wanna do is we wanna edit our app dot JS. So now within here since we have our Edit Guest function, I wanna use that and pass that information down here to my guest list. So, instead of just having Delete Guest, I'm now going to have Edit Guest. And I'm gonna set that equal to Edit Guest so I can pass that function down into my Guest list component. Then that means I'm also gonna have to come over into my Guest list component. And I'm gonna need to use that function just like I did the Delete Guest when I clicked on that button as well. So let's come in here and we'll do a similar thing where we can use the OnClick event handler. And will simply execute a function here, props dot and this time it's going to be Edit Guest and we're going to pass in the full guest object this time. So let's go ahead and save that as well. So now that's been a lot of typing in the last couple of lessons but if we've done it all correctly, now when we reload our application. If I come over here to my Guest list and I hit Edit, we should see all of the fields on the left hand side populated but now we're not talking about our ad form component. We've now switched it over to our Edit Guest form. So you can see that by the fact that we see Edit Guest at the top, as well as Update Guest and Cancel at the bottom. Now I need to put in a little bit of spacing there, but I'll fix that in a minute. So now remember, if I click that on accident and I wanna switch out of editing mode, then I've enabled the Cancel button to do that. I can hit Cancel and as you can see I switch back to Sign In and then I'm back in my non editing or in my adding state. So that I can go ahead and add in a new user. But if I come over here and I click Edit and maybe I notice that I typed in something wrong, maybe I typed in my name wrong it's actually there Derek Johnson. And it is not in Chicago, this is in Sacramento. And that's in California. So I can go ahead and click Update Guests. And you'll see that it's going to automatically update everything on the right hand side of the screen to be the information that I passed in. And then I can go on my merry way. Well, let's go on ahead and edit that back. Let's say that this was corrected as Jensen, and this is going to be Chicago and Illinois and we'll Update Guest. So then we're back to almost normal, although I did misspelled my name, so go ahead and do that. And let's go ahead and also add a space in here for the Update Guest as well. So let's come into our Edit Guest form. It will come down here to the bottom. And similarly to what we did before. In our Guest list, we just added this little MR for a little bit of spacing here. So we'll go ahead and copy that, we'll come back into our Edit Guest form. And we'll stick that here next to the primary. We'll save that and then we'll come back reload our form and hit Edit. And then we're we go we're right back to where we were. Now we have a nice little form that we can use to edit information, add information, as well as delete information. And now we're just about done but there's one other kinda nice little thing to add into our functionality because when we're writing applications for end users, it's very important for us to remember things like user experience. Now, one thing that I can say is if I were to reload this application and I basically just wanna start typing and have my information, start to show up and tab through. All of the form inputs over here, but unfortunately, by default. When I reload this application where I switch back and forth between different states and components, I don't have any focus. I don't have any way to assign focus to this first box here cuz really what I'd like to happen when I reload my application or when my component loads. I want to be giving focus to that first one, so as a user I can just start typing in. But, unfortunately it's not at that place right now, but luckily for us there is another hook that we can use within our react application. To enable functionality very similar to that, and that's what we're gonna look at in the next lesson.
