4.2 Handling Input Change Events
Now that you have a form to get input from the user, a common next step is to handle form submissions. But before we get that far, you also need to know how to get a sneak peek into what your users are entering in your form event before it is submitted.
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.2 Handling Input Change Events
Now that we have our beautiful AddGuest form all set up, we wanna be able to handle the input from the user and then ultimately submit it so that we can see it over here in our list of guests. But the way that we're gonna handle this is in a couple of different pieces. So let's go ahead and start to pick it apart and come up with a solution for that. So the first thing that I wanna be able to do is I wanna be able to work with my AddGuest form, and I want to be able to know when the user is updating some of these fields in here. And then pay attention to those updates. So really I want to handle the inputs being changed by the user so I can track the current state of all of these values. And then when the user hits submit, I can double check to make sure that everything is valid and that every field has some data, and then if it does, I'll go ahead and submit it. So we're gonna, like I said, we're gonna do that in a couple different stages. So let's begin by creating a generic handle input changed event function that we can use every time one of this inputs is changed. So let me create a simple function here called handle input changed. And that's gonna take in basically what's gonna be considered an event coming from our changes that are gonna be happening on this input fields. So what we're gonna have to do in order to actually get that event is we're gonna have to deal with the target of that event. And each one of these inputs is going to be a target in its own right. So we need to know which one is being called by name, which is why we gave all of these names as well as the value that is currently in that input field. And the way that we do that is, we're going to have a constant here and I'm gonna say I wanna know the name and I wanna know the value of the target of that event. So we're gonna set that equal to event.target. So coming from this generic concept of a target we're gonna get two values. The name and the value, and the name, once again is gonna be associated with this name attribute. And the value is gonna be the current value of this input field. So now that we have that information about the one that's being clicked, I wanna be able to store that information and where should I store it? Well, we've learned how to use the state of a component. So let's go ahead and do that again. So I want to bring in the use state function again. And then I'll come in here at the top, or wherever you want it, doesn't really matter. And I'll go ahead and create some state that I can save here. So we'll say const, and I wanna save the guest. And I wanna have a set guest function as well. And we're gonna set that equal to, and we'll set it to use state. And I could go ahead and do what I did before, and I could go ahead and just put in all the generic values kind of like I did before, but I don't really wanna do that necessarily. I wanna create a little bit of a helper variable here that's gonna hold that for me. So I'm actually going to copy this and we'll go back over to my AddGuestForm and we're just gonna creates a variable here. Actually, it'll be a console. We're gonna call this the initial form state. And that's gonna be equal to this kind of object but it's not gonna have all of these values. We're going to initialize this ID to no and everything else in here we're gonna have it be Empty. So once we have this variable, this value that's gonna be our initial form state, I can go ahead and pass that in here as my initial form state that I can use in my use state function that's gonna be the default for this guest object. So now I have this, the state that I can use, I can handle some input changed. Now what do I wanna do once I have the target, the name, and the value of the inputs that are being updated. Well, I wanna be able to update the current state based on that initial form state. So, what I'm gonna do is I'm going to use my set guest function that I have defined up here for my u state. And I wanna be able to do this in a smart way. So yes, I could try to figure out, I could create a big if else block or a switch block or something. And I could say, well, if the name is equal to name, or street, or city, and kind of do it that way, but there's a much smarter way that I could do this. What I can do is I can call set guest, and I'm going to explode this current guest object just like I've done before, as you saw in the previous lesson. And I want to set the value in there that has the name, or the value of name that's in there, I wanna set the particular property in there with that name value. And I wanna set that equal to value just like that. So it's a nifty little trick that you can use to be able to expand that out and I misplaced my curly bracket, there we go. So I'm gonna be able to set the individual properties that's being held by this main variable in my guest object and set it to value. So that's pretty nice. Now, what do I do with this handle input changed function? Well, now what I can do is I can come down to each of these inputs and I can set a particular unchanged attribute which as you can see here is a JSX attribute that allows me to tie into events that happen on this input. That every single time the value of it has been changed or updated, I can fire a particular function. And that function here is simply going to be my handle input change, and it's gonna take that Event that we passed on. So let's go ahead and save that. And we can come back over here. And we can go ahead and start to type things in here now. We're hoping that behind the scenes every time we do that, that it's gonna call that function. So to check, what you can do is you can, if you're using Chrome or any other sort of browser that has developer tools, you can open up the developer tools. And after you've done that, you can go into the source code for your particular application. So I'm going into my src, into my components into my AddGuestForm, and I can look at the code that lives in there. And I can start to set break points. So I can set a break point right here on my handle input change, right before I actually execute that Set Guests. And if I were to come over here into name, because this is the only place where I've tied anything in, I can start to type something in. So I'll type in a D. And as you can see here, the handle input changed, has fired where the name has the name of the input that I've been updating in this case its name, and it has the current value, which is just a D. So and then it's calling set guest. And we can also take a look at the current state of guest. As you can see here, the name is Derek. Now, if I were to let that go through. And then go ahead and update this again it fires again and this time I'm still updating name, the value is now DE and the current state of guests before this is where the name is just D. So now you can see that every single time I'm doing this, it's firing this particular function and updating appropriately. So what I wanna do, is I wanna be able to use that information and do the same thing for all of these events, for all of these inputs. So I'm just gonna copy this here, copy. Then we're gonna paste it down here on all of these inputs. So now every single time that my user comes in here and starts to update the information that is found on any of these inputs, I'm gonna fire that same event. So now, I'm able to track the current state of this form. So the current state of this form at any given time is going to be the values that are associated with the guests, so things like name, street, city, state and all the values that are currently being set in here. And so the next thing that I want to be able to do is take all that information, that current state, and then submit it to my application or someplace whenever my user clicks the add new guest.