Kent C. Dodds: 0:00 let's play with this. I'm going to actually pull-up my console here and we're going to be playing around with that a little bit. Let's go ahead and type in something, we'll hit Submit, and nothing really happens there.

0:11 We actually need a submit handler. You will notice that the input got cleared out and actually, if you watch carefully, my console also got cleared out. We'll figure out what that's all about here in just a second.

0:22 We're going to start out by following along with the emoji here and I'm going to create a submit handler called handleSubmit. When the Submit button is clicked, this is the function that's going to get executed. I'll create a function here called handleSubmit, and then we're going to take that function, and apply it to the form with onSubmit.

0:40 The eventing system in React is really awesome, because it allows you to say, "Hey React, when you create this form element, this DOM node, I want you to pass this function for the onSubmit events with this form ever experiences that event."

0:54 We have all kinds of events. We have Blur and onMouseOver, all of the events that you could possibly imagine directly on each one of these elements and being able to apply it to specific element like this is super awesome. We have a very clear connection between this form and its submit handler. Cool.

1:16 With that, let's go ahead and console.log(submitted). Save that, come over here, type something, hit Submit, and huh, the console.log didn't show up. That's interesting. Well, here, let me show you the URL bar.

1:32 You see that question mark right there. What's actually happening is the browser by default will make a GET requests to the current URL with the values of the form as query parameters in the URL. We're actually getting a full page refresh when we submit this form.

1:50 Now, we just have a question mark, we don't have any values of the form. The reason for that is because our input is not named. If I give it a name of username, and save that. Now, we'll come over here and say something. We'll hit Submit, we'll get a full page refresh, and we'll get username = something.

2:08 This is the default behavior for the browser, but we're making a single page application with React. We don't want to do a full page refresh. We don't need to make a post to the current URL. We're going to do all of this stuff in JavaScript.

2:20 That's why we're going to accept the event that is our submit event. We're going to say event.preventDefault(). Now, we type in something and we get no refresh and we're going to see our console.log right there.

2:35 That works great. I want to show you something about this event here really quick. Let's go ahead and we'll console.log(event), we'll hit Submit, and you'll notice it says SyntheticEvent. What the devil is SyntheticEvent?

2:49 SyntheticEvent is actually not a real event from the browser, but it's a object that React creates for us that looks and behaves exactly like a regular event. Most of the time, you won't know that you're interacting with a fake event or a SyntheticEvent from React. You'll just assume that you're interacting with the native event.

3:10 They do this for performance reasons. React also uses event delegation, if that's something that you've heard of, all to just improve the performance of your application. If you ever need to access the native event, then you can do so with .nativeEvent.

3:24 We'll save that, hit Submit, and now we get our submitEvent. That's the actual event object that was triggered when I click that Submit button. Again, you won't notice the difference normally. We'll just go ahead and interact with the event directly.

3:37 One of the properties on an event, you can see it right there, is the target property. Here, I'm going to go ahead and clean all this stuff up. Let's get rid of all that. With that target property, we're going to click Submit, and we're going to see the form, and that's going to be just some special rendered out thing that the Chrome DevTools does whenever you log out a DOM node.

3:58 I don't want to see the DOM node. I actually want to see properties of that DOM node. I'm going to use the dir() method on console. That will just give me the FormNode itself with all of the properties. Perfect.

4:11 If we look up here, at the very top, we're going to see zero and one. Zero is our input. What we can do is just say, at and that's going to give me my input, which is awesome. With the input, I can actually also get the value.

4:27 If I type in anything here, hit Submit, then I can say input, and come down here to where it says value. There it is right there and I can see what the value is right there. I can get my value from event.target at .value. Then I can say, onSubmit {username: value}.

4:51 This is going to call the function that is being passed to our UsernameForm, which ultimately just alerts. We'll say, Kent C. Dodds Submit, and we get you entered Kent C. Dodds. As awesome as it is to get the value here, what would happen if I were to put in another input here, and this was firstName, and here's firstName as the name input here.

5:17 That would not work out super well, because if I type in a username right here and hit submit, then I'm going to see, "You entered nothing," because the target at zero is now something completely different. Let's console.log(event.target). I think you probably see where I'm going with this.

5:34 Of course, we need to do a dir. We hit Submit, and we get our form. Now we have zero is that first input. Targeting things based off of the order in which they appear in our form, probably not the most change resilient way that we could access inputs.

5:53 Let's find a different way. Come all the way down here and take a look at some other properties that we have on here, We have all kinds of things on these DOM Nodes. There's one in particular, that starts with an E. That is elements. There it is. We have , 1, 2, and so on, and so forth.

6:13 As we just learned, we don't want to worry about the order of these things. Another thing that you'll see in here is the first name and username, and those are pointing to the inputs. This basically is whatever you specify as the name for a given form will be accessible by that form by the name.

6:32 We call this first name. We can access that input by its first name. We call this one username. We can access it by its username. We don't need a name. We can also do an ID. We could say username input as the ID. We save this. We hit Submit. We're going to get our forum. We'll come down here to our elements. We'll see the username input by its ID as well.

6:57 The reason that I want to use ID instead is because I should be labeling my input. Even though the label appears right next to it, and many users will just make sense of that, screen readers need this label to be associated to that input to work properly.

7:13 In addition, if it's not labeled properly, then when I click on the label, it does not focus the input, which is what I want. Let me get rid of this first name and put. I think that served its purpose here. We're going to say HTML 4 username input. This is saying, "Hey, this label is for the username input."

7:31 Now in HTML, this attribute is just the 4 attribute, but the DOM property name for the label is HTML 4. That's why you say HTML 4, you pass an ID to the thing that you're trying to label. That associates the label to the input.

7:45 If we save that now, we click on the username. That will focus on that input. In addition, we can now access our username input under the elements property of our form. Now we can say username input and get the value. Let's do it that way.

8:03 We're going to say event.target.elements.username input, and that's going to get us our value. We'll say "Hi there." Submit, and you entered HTML input element. That's because I forgot to do .value. We'll save that. Let's try that again. There we go. You entered "Hi there."

8:26 There are various ways to get inputs from a form. This is probably my favorite because we have to give an ID to our inputs anyway. We may as well give something that we can reference in our onsubmit handler. That's where we're going to leave it off with.

8:39 In review, what we had to do here is I made a form with an onsubmit handler. I had to prevent the default behavior of doing a post request to the same URL by doing a full-page refresh. Then we retrieved the value of the input in question by giving that input an ID associating that label to that input with the HTML 4 so that our form is accessible.

9:01 We grab that value from the event.target, which is our form, then the elements property, which will get us all of the elements that have an ID or a name. We can grab that by its ID and then get the value. That's what we pass to the onsubmit username callback that our app component is passing for us, which ultimately will alert the user with the username that they entered.