In the last section we added some styling to our input component.
But when we render it inside the simulator I wasn't able to click in here.
I apologize I made a little bit of a mistake.
We added on the style of input style.
I completely forgot that we had already added on the style of a height and a with on here.
So whenever we add two props with the same name the earlier prop is overwritten by a later one.
So I'm just going to remove the style that's hard to clear with the height of 20 and with 100.
Save it and now it will refresh the simulator and actually tap in here and start typing some text.
Ok so back to where we need to be.
One thing I want to point out here is the flex values really quick.
So remember because we gave the input a flex of two and a label style of one the input is occupying
two thirds of the available space whereas the label is only applying or I should say occupying one third
of the space.
So just a little bit more challenge inside here a little bit more housekeeping to do on this input before
we can move on to that password one.
First I want you to notice one really annoying thing here.
If I put in something like you know maybe I entry email and I've got a e-mail of like bottle at gmail
dot com as a bad example let's see if I can yeah.
Wait no.
OK.
Well if I just do.
There go.
Getting that right there you get the idea.
If I type in a word that is not valid iOS is going to try to auto correct my value here and I really
very likely never want to show my users some auto correct information around their e-mail address like
you know it's incredibly common for people to have an e-mail like I don't know super Princess 32 or
something like that and I don't want to start to show user some validation around their e-mail address
because it could be completely valid.
You know as long as it has a fully qualified domain at the end here so would be really nice to not have
any default autocorrect on here to handle that.
We can just pass a prompt to the text input here to disable that default auto correct functionality.
So I'm going to pass in a additional prompt to the text input of auto correct false.
So this says hey don't don't try to auto correct anything here.
People are going to have crazy e-mails.
Don't worry about it.
So now if I start to do like you know test one or whatever.
Ok I made a mistake.
I may be kept busy.
Let's get a shot.
Just one.
OK.
My apologies my my mistake there.
Autocorrect should have a capital C not a lowercase c and we just have to pass it the value false and
then we won't get any validation here or any messages that the users passing in something funky.
Now the other requirement here for e-mail tag we had said that we wanted to show a placeholder to the
user something to approximate Hey you're supposed to put your email address in here or something beyond
just the text or the label that says email.
So to add a placeholder to a text input also very easy to add it just like auto correct.
We just need to add an additional prompt to the text input so I'll add a additional Propp of placeholder
and we need to make sure that we specify this placeholder on the fly or make it available for configuration
from the parent component.
Because I don't want to make sure this thing I know I don't want to hard code email in here if I heartwood
e-mail in here all of a sudden my input component is no longer usable.
So instead we will receive a placeholder prop from our parent component.
So get it out onto our props list right here.
A placeholder like so and then we're going to flip back over to our log and form and make sure that
we actually add that placeholder in.
So here is my input.
I will add in a placeholder.
And you know you might think well put in place placeholder like email or something like that I love
the pattern of placing in some realistic input for the user some realistic prompt.
So instead of give them a more realistic prompt of you maybe your e-mail looks like user fetchmail that
column just something to guide the user into thinking oh that's what this form of this input should
be it should be something that looks like an email address.
So now you refresh the simulator we see we've got a very nice looking placeholder in there right now
and it's very easy for the user to understand OK you know I should probably click in there and start
entering something in our voice has been a great little advance here.
I think there's just one last little piece of housekeeping I want to take care of back inside of our
log and form.
We are currently stashing the value of the e-mail input on a piece of state called text.
Now that's completely fine.
You know nothing bad about that.
Member the names of all these state properties are completely arbitrary.
We can make them anything we want but very soon we're going to want to add in a nother text input to
handle our email field as well.
And at that point in time it's not really going to make sense to have like a text besides state and
like password text or something like that.
So I'm going to choose to just rename the prop here from or excuse me the name of the state property
from text to e-mail.
So it's very clear to anyone who looks at this in the future that this piece of state right here contains
the user's e-mail address that they're trying to type in.
So we need to also update some of our code down here as well.
The input tag should now be pulling its value from this dot state DOT e-mail.
And when we receive some amount of text from the onchange text callback we're no longer going to set
a prop called Text.
We're going to set a prop called e-mail.
So take that text and set it on a proper e-mail.
One other thing if you want to rename this Propp to e-mail as well and then maintain the shortened syntax
that's completely you know definitely good.
Good factor as well.
Let's go ahead and do that just for the sake of completion.
So we're going to say that rather than calling this argument text.
I want to call it e-mail.
Just a quick reminder in javascript.
You can name your props anything you want.
You can remain them on the fly.
Doesn't matter whatever you want to be called.
Go for it.
Are you saying the argument did not mean to say Propp and the argument can be whatever I want to call
it.
Props have to be specially named anyways.
So now I've got just the email Propp.
I will remove the text tag and I'm relying on a little bit of E.S. 6 again of getting this expanded
out to a full object of email Colan e-mail.
All right.
I think that's just about it for collecting e-mails from our user.
So we're definitely in a good spot here.
Let's continue in the next section and start handling a password from the user as well.