FREELessons: 19Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.5 Create a Form to Edit Guests

In apps like this, you will find many situations where you want to change state and display different components at different times. In this app, depending on what state we are in, we are going to display one of two forms. We already have the AddGuestForm, so now it is time to create its cousin, the EditGuestForm.

4.5 Create a Form to Edit Guests

Now, it's time for us to turn our focus onto editing the current guests that have already signed into our guestbook. So basically, thought process here is we're gonna take our add guest form and basically duplicate it with a few minor modifications. And then in our app component, we will do some conditional rendering based on what state our app is in, whether we're in an editing state or we're not in an editing state. And that will determine which of these forms we display either the AddGuestForm or the EditGuestForm that we're about to create. So let's go into our components folder will create a new folder and this will be the EditGuestForm. And within here, we'll create a new file just like we've done before EditGuestForm.js. And we'll go ahead and once again, import React. And since we're here right now, let's go ahead and bring in the useState and useEffect hooks, and we'll say that we're going to import those from React cuz I know that we are gonna use all three of these. So let's go ahead and do our export const EditGuestForm. And we're gonna set that equal to, we're gonna take in props, and then let's go ahead and paste in the current state of our AddGuestForm just in the EditGuestForm. And now, let's do a little bit of editing. So the first thing that we're gonna get rid of is this concept of the initialFormState, we're not going to really do that in this case. What we're gonna wind up doing is when we switch into an editing state within our app, we're going to provide this form with the current guests that we're editing. And so that's what we're going to assume that we have by the time we get here, so we are going to use this state to manage the guests and do the setGuest, but we're not gonna use this initialFormState, we're gonna use props.currentGuest. And we'll go ahead and work on passing that in in a little bit. We're still gonna have the the handleInputChange cuz we're gonna wanna be able to modify the different fields within our forum in a similar fashion to what we've done before. Then we're also going to have a handleSubmit, this is gonna be a little bit different, we will prevent default. I'm not gonna be so concerned in this case about setting the guests because really what's gonna happen is when they submit the form, we will update that particular user or will tell the app component to update that user or that guest, and then we'll just switch back to the AddGuestForm. So in this case, we're not going to AddGuest, we'll create another function that we'll pass in, we'll call that one updateGuest, and we'll pass into it this newly updated guest, like we did before. And basically, everything else that we see in this form is gonna remain the same, except for towards the very bottom. Now, right now, we have only an Add New Guest button with a submit as a button primary, so we're obviously gonna make that a little bit different. We don't want this to be Add New Guest, we want this to be Update Guest. And then also, what if we go into edit mode for this particular guest, but then we decide that we don't wanna do that, maybe we made a mistake, we wanna be able to cancel out of editing. So we'll go ahead and create another new button here. And in this case, we are going to use the button class as well as button, and we'll make this one secondary, just so that it's a little bit different, it stands out from that Update Guest. And we're also going to give this some text called Cancel. Now, in this case, what happens when we click this? Well, right now, if you leave it in this particular states, then if we click the Cancel button, nothing's gonna happen. So we need to have a handler in here to basically revert us back to where we came from to be not in editing mode anymore. So really, I'm gonna just kind of create a simple little onClick handler here, that's going to allow us to handle that scenario. And in this case, it's simply going to be a function with no inputs. And we're gonna go ahead and pass this in once again, from the app component into our edit guests form, so it'll be on our properties. And in this case, we'll just say we're gonna setEditing, and we're gonna setEditing to false, so that'll take us out of that state from the app components, let's go ahead and save that. Now, we've kind of made several changes, we made some assumptions here about what's happening and what we're passing in, and that's fine, we'll update the app component in the next lesson. But the final thing that I wanna do is I want to use the effect because when the component loads with that guests that I passed in, I wanna make sure that guest is set properly in our application. So the way that we do that, and how we've learned how to do this before is by using our useEffect hook. And in this case, we're just gonna give this a function just like we've done before, and we are going to use our setGuest function that we got from our useState hook, and we're going to set our guest to props.currentGuest, just like that. But remember, I can't just leave it like that because we explained how you would run into this infinite loop scenario and we don't wanna do that, so in order to bypass that or to make sure we don't have issues with that infinite loop, we need to come down and we need to provide a dependency to this hook. And the way that we're gonna do that is by providing an array of dependencies. And remember, initially when we did our first time through this, we left this empty because we didn't ever want to change anything on update. Well, in this case, when something does update, we do wanna make those changes, so we do wanna monitor our properties. So if I do pass in a different user, I wanna make sure I update this form so you can see the correct guest at the time of rendering. So that's just a way for us to kind of keep check of which guest we're currently editing and we could edit things behind the scenes. And switch which one were editing behind the scenes and then ultimately have that displayed on the screen for the user. So I think that's gonna take care of it from an EditGuestForm perspective. Now, we have that all taken care of, let's save that. But now, we have a little bit of work to do from the app component side of things, we need to be able to conditionally render this one if we're in an editing state, and then pass them information in to this EditGuestForm. So let's now start to focus a little bit on the app component side of the equation.

Back to the top