- Read Tutorial
- Watch Guide Video
It's gonna help to walk through this event process and really take a step by step approach and being able to see what we need to do. Now we know on the API side what we're going to have to do is send this data, this username or this email and this password, we're gonna have to send that to the API.
So that means that we're gonna need to access state and that we're also going to have to understand exactly how the form submission process works. So that's what we're gonna work on in this guide and then in one of the next guides, we'll actually connect to the API and login which will be pretty cool.
So inside of this handleSubmit event handler, remember we added this to the onSubmit listener for the form. Inside of here, we have the event. Now if we just submit the form, let's go check out and see what happens.
I'm gonna switch to Google Chrome, I have the console open here and if I just have some password or some email and password like this setup, if I hit login, then you're gonna see a few things happen. First, if you noticed, this actually refreshed the page which is never something you wanna do in react.
And if you scroll up just a little bit, you can see that we have our console log statement here where it handled this submit, and then we have the SyntheticEvent so it printed out the event. But then you can see it navigated to localhost auth and then it put the email and the password in the URL bar.
That is definitely not what we want to do, but that is the basic HTML default behavior so we're gonna have to override that. So let's first start by doing that, so I'm gonna clear the console now and switch back to Visual Studio Code. What we wanna do is grab that event and call a special method on it that will prevent that default submission behavior.
So I will call event and this is just the same event we're getting right here in the listener. Then I'm gonna say preventDefault and that is with a capital D and then I'll say function, so make sure you have parens at the very end. Now if you hit save and come back, I'm going to clear the console out, and now if I hit login, you can see it printed out our console log but it did not redirect.
So what we're doing is we're saying that I want you to find this event and then I do not want you to refresh the page, I don't want you to follow your default behavior, I don't want you to put this email and this password in the URL bar, those kinds of things.
Whenever you're working with forms in react, you typically are going to also, you're also gonna have to prevent that default behavior, so that's a very first step. Now if we look at this SyntheticEvent right here, you may think okay, so are we gonna follow this same process and go down to target but no because the target is null and if you scroll down you'll see exactly why that is.
You get a warning that says this synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property target on a released nullified synthetic event. So what that means is when we are printing out that event, we're not actually getting access to the real event, we're able to prevent it but that's the only thing we need the event for is to prevent the default behavior.
That's the reason why we updated the component's state. So we do have access to this email and password but we're not gonna get it from the event, we're simply going to access the state directly.
So let's go to Visual Studio Code again. Now instead of printing out event, let's print out the state. So I'm gonna say this.state.email and this.state.password, hit save and now let's test this out. Clear out the console and if I hit login, now you can see that it says handle submit and we're printing out the correct email and the password that I typed in.
So now that we have all of this ready, we have our form working the right way and we now have access to the data inside of our handler, what we can do next and this is what we're gonna do in the next guide is now we can connect to that outside API so we can actually login.