We've got the basics of our form put together.
So we're now going to start to add in some event handlers to our inputs.
We're gonna put it on a submit handler for the form and make sure that whenever a user enters something
and clicks that button right there or otherwise attempts to submit the form we ultimately make a request
to our off service now in order to keep track of whatever user has typed inside these two inputs.
We're going to need to keep track of some piece of state.
So we're going to be using hooks on this project at the very top.
I'm going to import the U.S. State hook from react then inside the component.
I went to create two new pieces of state one called One email the other set.
Email and I'll default out to be an empty string and then password and set password to empty string
as well
all then start to wire up these different pieces of state as values for these inputs along with some
on change event handlers.
So first on email I'll set the value as email and also put in an on change handler.
I'm going to abbreviate the event argument too on change right here as simply e instead of event.
Then we'll take a look at that even objects we'll look at Target dog value and use that to update our
email piece of state using these set email function.
So we'll do set.
Email us in E.
Target value.
I can save this.
You can see that entire line.
Now looks good.
I'll then repeat that same process for the password input down here as well I'll put in a value of password
and then whenever the thing gets changed we'll take that event and call set password with e e dot target
dot value.
All right.
So we're now tracking those two piece of states.
Now the last thing we have to do is make sure that any time someone hits the enter key or either or
it clicks that button down here at the bottom we want to handle the submission event coming off this
form element that I'll put on an on submit even handler anytime user tries to submit the form.
I will run a helper function.
I'm going to simply call on submit and I'll define on cement right above.
I'll take the event object coming out of that I can either refer to it as E or since we are in a long
form function right here.
I'll call it events instead just for clarity we're going to call prevent default on there to make sure
that the form does not tried to submit itself to the browser and then right now let's just do a console
log of the email and password we'll say this we will flip back over I going to open up my console and
I'm going to enter in an email address of test at test dot com and a password of password a click on
sign up and there's our stuff now.
Right away you're going to notice that there's some like mystery stuff going on here.
We can ignore.
If you see like air and get something rebuilding or some deprecation notice we can ignore all that stuff
for right now.
Well without a doubt we can have some inputs being put inside of our form submit the form and then hey
we got our actual email and password that we need to submit to the back end server.
So at this point we need to figure out how we can get our application to somehow communicate with our
service.
So let's take a quick pause right here and then figure out how we can actually take that email and password
and submit it to our backend in just a moment.