FREELessons: 19Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.3 Handling Form Submissions

It's that all-important time where the user actually gets to send us some data. In this lesson, we will work through sending the data to the App component and displaying that data in our GuestList component.

4.3 Handling Form Submissions

But we've come pretty far so far. Now, we're able to take the state of our form and we're able to monitor that and update it as the user interest and additional information. But now I wanna handle the form Submit. Now, this is going to take a little bit of thought, so let's kind of walk through the process. As you recall, primarily what you're seeing on the screen right now is three main components. Honestly, it's four, but three main components. We have our app component, which is the entire screen. Then we have the right hand side, which is our guest list component, and then there are guests sub components. And then on the left-hand side, we have this new add guest form component. So really what I want to do now is I wanna take the state of the form. When the user clicks the add new guest button, I wanna pass that guest information up to the app component, which can then send that information, that new guest down into the guest list and ultimately create new instances of our guest component down in the list. So it seems like a lot of moving parts but, honestly, it's not that bad. Once you do this once or twice, you'll see it's actually fairly simple. So let's start from the highest point. Let's start up at our App component. And what I want to do now is I want to kind of follow this structure that you'll see quite a bit in applications like this where we have information in child components that we want to bubble up, or notify the parent when something has happened. Now typically, the way that you do that is by defining an event handler or some sort of function in your parent and then passing it down into the child components. And then executing it within the child component, with some information once some operation has completed, and that's exactly what we're gonna do now. So the first thing that I wanna do is I'm gonna create a new const function here and we'll call this addGuest. And it's gonna take in a guest object which is gonna follow this same structure that we've been doing so far, since we've started our application. And then once we get that information, I wanna make sure that I update the current guest list. So I'm simply going to do setGuests and then within there,I go ahead and expand upon the current guests and then go ahead and add in the new guest. So I'm creating a new collection or array of guests and I'm starting with the current list of guests and then adding a new one in there. So it's actually pretty simple, pretty easy to handle there. But before I can do that, I also have to handle this concept of an ID because nothing's generating that for us yet. Now I'm going to put something very simple in here. This is obviously not going to work for a larger application. And honestly, we could break it in our application right now, but I'm merely going to set the ID equal to. If I go into guests and I go ahead and get the length and we'll just say we'll add one to that now. Yes, we could break that but it'll be okay for what we're trying to do. You could get the max and then go ahead and add one to that or whatever you really wanna do. It doesn't really matter but for our purposes, this should be just fine. So we'll go ahead and save that. And so now what we can do is we can come down into our addGuest form component and I'll go ahead and use an attribute. And I'll go ahead and pass in this addGuest function that I want to call as soon as I have successfully submitted that form. So now I'll have access to whatever's assigned to this addGuest attribute from within the addGuest form. So we'll make sure that we save that. We'll go into our addGuest form, and now we'll figure out how we wanna handle the actual form submission. Now we're gonna start very simple, and then we'll go ahead and build on to it and kind of fix things up from there. So the first thing that I wanna do, just like I did with the updating of the Inputs for all of the input changed events. I wanna create an event handler here and we'll call this handleSubmit. And this is going to take in an event and we're gonna process and do some data manipulation. But the first thing that I wanna do like a good JavaScript developer in handling form submissions, is I wanna make sure that I use my event.prevent default. Because what's gonna happen if I try to actually submit this form like any other form is the form is actually gonna want to run a post to the current URL that I manage. It's gonna want to send some data and I don't want to do that. I want to handle everything in JavaScript behind the scenes, so I'm gonna make sure that I call this preventDefault function first. Now the next thing that I wanna do is we're gonna like I said, we're going to start simple and we're merely gonna go into the properties collection. And I want to addGuest and I want to pass into it, the current guest object that we have stored in our state right here. And now once I have this handle submit function, I can come down here to my form and I can say unsubmit which is a special JSX attribute where I can pass in an event handler. In my case, handles submit so that I can bypass the normal form submission functionality and do my custom functionality right there. So now that I have that setup, I'll simply say that my new person here is John Doe, and this person is on 333 Third Street and that's in somewhere California, 90210. And the phone number is just some digits. Honestly, I could put anything in here. I'm not really worried about the validation. And then once I hit Add New Guest, you're gonna see pow, it shows up over here on the right hand side. Now that's very good, but I'm seeing a couple pieces of information, or a couple of things here happening that I don't wanna happen. First of all, we're missing the phone number. So we're gonna have to handle that. That's a bug that I've created. And then on the left hand side, we have here the form submission. It still has the data in there that we initially put in there and that's not very good user experience I want. Once we successfully submit the data to our guests book, I want to clear all this out. So there's a couple things that we have to fix. The first fix I think is going to be a simple one is going to be the phone information. And if we come down here, we see, yes, I have improperly named the phone input within uppercase P. And that might seem like a very simple problem or something simplistic but it it will cause problems later on, so I needed to, I have change that and that should fix our phone issue. But now what's the other issue, we're not clearing the sta of what our current information is in our form that we've just submitted. So let's go ahead and fix that. So once we have properly submitted the guests and have that in our new list, I'm gonna come back in and I'm going to say set guest and I want to set the guest back to the initial form state, but that's not enough. The reason that's not enough is because we're not paying attention to the current values that are found here on the guests state. And by that I mean, if you come down here to our inputs, we're not setting the value of all of these inputs to anything right off the bat. And even if I were to set the initial form state, because these are not initialize to some value, it's not going to make any difference. So what I need to do is I need to come in here and I need to set the individual values to guests that whatever the particular property is, so let's go ahead and copy this. And we'll come in here, and we'll paste this next to street. And all we need to do is fill in all of these values this way. And we also made sure that we initialized all of the initial state properties to be the appropriate things like empty or null or whatever have you. And this should be able to fix that problem. So then we should have a fully functional form. For the most part, there is going to be another issue and we'll see that in just a second. So now I've set the initial values and if you come back over here, you're going to see that these are all blank like they should be. And once again, we'll add in our friend John Doe, 123 Second Street. This is going to be in somewhere California, 90210, and the phone number is gonna be 555-666-7777. And now when I hit the add new guest, we now see we get the correct information for John Doe with the phone number so that was the issue with the upper case P and we cleared our form which is excellent. So now we're really getting to a good spot, but there is one other issue. If I were to come down here to add new guest right now and click that, well we're gonna get another guest here but it's all blank information which is obviously not what we want. So there's a couple different ways we could fix this. I'm gonna use the kind of traditional way of specifying a required attribute here on this input. We'll go ahead and copy that and simply put this on all of these inputs. Now obviously, you would only wanna put this on the ones that are actually required. So we'll go ahead and save that. And now if I come back over here and hit add new guests, you're now gonna see it's going to kind of trip every time we go down here. So if I say Jane Doe, and then hit Submit new guests we're gonna sell you have to fill out this field one, two, three. Second Street. And I will do this all the way down. But now I can enter in all of my information. It's going to make sure that I have filled in my form properly. And once I do, I'm gonna get additional guests over here in my list. So as far as the submission of new guests are being able to sign into the guest book, we're at a good spot. So the next things that we're gonna have to take care of are some of the augmenting, we're gonna want to Be able to handle the deletes of our guests as well as the edits. And so those are some of the things that we're going to start working on next.

Back to the top