Visually our form is definitely coming together.
So now it's time to handle the data side of this form as well.
So we need to make sure that we create two pieces of state inside this component one piece of state
to manage this input.
A second one for this input and we'll want to make sure that anytime user taps on sign up we attempt
to take those two pieces of state and then submit them to our back and server in order to create a new
user account.
So let's first get started by wiring up some state to both of our input elements at the top off Find
My import from react and add on an import for you state.
So now we can use that you state hook to create two pieces of state.
So the first one I'll call email and set email and I'll use the default value of an empty string and
then I'll do password and set password with you state as well.
Now we can wire those up to both of our different inputs on the first inputs.
I'll put in a value of email and whenever a user changes this input the on change text callback will
be invoked so whenever that gets called Remember this is going to be a function that gets called with
the new email so we can take that new email and call set email with it.
So set email with new email if we wanted to we can condense that prop.
However we don't really have to put in this entire function right here.
The code you see right there would be equivalent to just passing in set email directly without any parentheses.
Now any time on change text is called react is gonna essentially take that new text or that new email
and pass it directly into set.
Email for us now we can do the same thing on input for password as well so on this one I'll give myself
some space right away.
I'll put in a value of password and on change text of set password.
So let's now save this and we'll just make sure that we can still type in there.
Yep definitely can now right away as soon as I start typing I'm noticing a couple of issues.
First off.
Notice how I've got that auto capitalization on ISIS.
Once again we said many times inside this course that anytime we're handling with a or dealing with
an email or password we really don't want to have any form of auto capitalization or auto correct.
So let's make sure that we add in some props to both our inputs and remove that functionality.
It's on both my inputs I can once again give myself some space here my code for matter took it away
from me.
So on email I'll put an auto capitalize of none.
And auto correct of false then we can use both those on our password as well.
So on the second one
I'll copy paste in those two properties as well OK.
So now we can say this once again.
And now when I start to type in here.
Yeah.
No.
Auto correct.
No auto capitalization.
Now the last thing I think we need to take care of.
Whenever I put in a password here it's showing up as plain text which is definitely probably not what
we want we probably want to show some like hidden stars whenever user types in there or puts any input
in so that someone else can't just look over our user shoulder and steal their password.
So to make sure that this text input right here shows up as kind of a password appropriate one we can
add in one additional profit to our password input that additional prop is going to be secure text entry
like So remember if we just write out the prop name that's equivalent to saying secure text entry is
true.
So just a shortcut to write out the prop name by itself.
Now we'd save this and we attempt to type in the password.
We've now got that protected input.
Definitely what we want.
I'll do a quick test on Android as well.
So over here I can put in my email and my password.
Yep looking good OK.
So I think that's good to start for our two inputs.
So now that we have some state variables here.
Email and password whenever user taps on that button we're going to want to make sure that we attempt
to make a API request and sign up our user.
Now handling that means that we need to make use of access once again to make a network request to our
server and it probably means that we also want to start to think about the overall structure of data
at a higher level inside of our app as well.
So as usual let's take a quick pause come back.
The next video and start to discuss how we're going to kind of structure data handling inside of this
app.