We designed a simple form for our SignInPage.
Now let's wire in some functionality.
We'll want to manage the form fields
as controlled components in React.
So let's create a state variable
to hold and set the "email" value,
using the "useState" hook.
The initial value can be an empty string.
Now let's duplicate this line
and create another state variable for the "password".
And with this
we can set the "value" of the "email" Input.
Except that Input is our own custom component,
so we'll first need to pass
the "value" prop down to the native element.
And we'll also need to pass
an "onChange" event handler,
to update the value when the user types something.
Now, if you're familiar with React
you may know that, instead of this
we could accept any "props"
and just pass them all down to the native "input"
using the spread syntax.
This way we could accept any property
supported by the standard HTML element,
without adding each one of them individually.
But the downside of this approach
is that Visual Studio Code won't be able
to infer which props we accept.
So for this example I will actually
declare each one individually,
just so that we can see the right suggestions
in the editor.
There are other ways to declare
which props are supported by a component of course,
but this simple approach will do for this example.
Anyway, the value here will be
our "email" state variable.
And then we want an "onChange" handler,
that's a function that takes an "event" object
and sets the "email" variable
to the value we can get from the "event.target",
that will be whatever the user entered.
Now we want to do the same for the "password":
set the "value" property.
And add the "onChange" handler,
but in this case calling "setPassword".
Ok, so this is the standard way
to have controlled input components in React,
using hooks.
Now we want to handle the form submission,
so "onSubmit"
we could pass a function called "handleSubmit",
that doesn't exist yet but
I'm going to create right now.
So this takes an "event" object.
And we can start by just logging
the values that we should send to the API,
that is "email" and "password".
Let's see if this works.
If I click the submit button,
actually, this triggered
a default form submission from the browser,
so it reloaded this page.
I forgot to call "event.preventDefault()"
at the beginning,
because we want to handle
the form submission ourselves.
Let's try again. This time we can see
our log message in the console.
And if we enter some values,
oh yeah, the browser will validate the email address
and warn that it's invalid.
That's good, but if we want to do validation
then we should also declare that
that field is "required".
And to do that we'll first need to add
a "required" prop to our custom Input component.
This way in the form we can declare that
"email" is "required",
and in fact so is the "password".
Ok, so at this point we shouldn't be able
to submit an empty "Email".
We have to type something,
but it also needs to be a valid "Email".
And once we fix the email
of course the password is also required.
Only if we fill in both fields
we can finally submit successfully,
and we can see in the console logs
that the state variables have the right values.
Ok. So our form is now wired up correctly
with the React component state,
and we also have some form validation in place.
We'll continue in the next video
where we'll call the API
to perform the login on submission.