1
00:00:01,130 --> 00:00:04,220
In the last section we added some styling to our input component.

2
00:00:04,220 --> 00:00:08,260
But when we render it inside the simulator I wasn't able to click in here.

3
00:00:08,300 --> 00:00:10,740
I apologize I made a little bit of a mistake.

4
00:00:10,790 --> 00:00:12,940
We added on the style of input style.

5
00:00:12,950 --> 00:00:17,340
I completely forgot that we had already added on the style of a height and a with on here.

6
00:00:17,540 --> 00:00:23,660
So whenever we add two props with the same name the earlier prop is overwritten by a later one.

7
00:00:23,870 --> 00:00:29,320
So I'm just going to remove the style that's hard to clear with the height of 20 and with 100.

8
00:00:29,510 --> 00:00:36,350
Save it and now it will refresh the simulator and actually tap in here and start typing some text.

9
00:00:36,440 --> 00:00:38,960
Ok so back to where we need to be.

10
00:00:38,960 --> 00:00:42,980
One thing I want to point out here is the flex values really quick.

11
00:00:43,070 --> 00:00:50,660
So remember because we gave the input a flex of two and a label style of one the input is occupying

12
00:00:50,660 --> 00:00:56,930
two thirds of the available space whereas the label is only applying or I should say occupying one third

13
00:00:56,930 --> 00:01:00,120
of the space.

14
00:01:00,190 --> 00:01:05,860
So just a little bit more challenge inside here a little bit more housekeeping to do on this input before

15
00:01:05,860 --> 00:01:07,800
we can move on to that password one.

16
00:01:08,170 --> 00:01:11,500
First I want you to notice one really annoying thing here.

17
00:01:11,620 --> 00:01:21,160
If I put in something like you know maybe I entry email and I've got a e-mail of like bottle at gmail

18
00:01:21,160 --> 00:01:26,040
dot com as a bad example let's see if I can yeah.

19
00:01:26,050 --> 00:01:27,930
Wait no.

20
00:01:28,250 --> 00:01:28,520
OK.

21
00:01:28,550 --> 00:01:29,590
Well if I just do.

22
00:01:29,590 --> 00:01:30,120
There go.

23
00:01:30,140 --> 00:01:31,830
Getting that right there you get the idea.

24
00:01:32,240 --> 00:01:39,320
If I type in a word that is not valid iOS is going to try to auto correct my value here and I really

25
00:01:39,320 --> 00:01:44,980
very likely never want to show my users some auto correct information around their e-mail address like

26
00:01:45,020 --> 00:01:54,140
you know it's incredibly common for people to have an e-mail like I don't know super Princess 32 or

27
00:01:54,140 --> 00:01:58,850
something like that and I don't want to start to show user some validation around their e-mail address

28
00:01:58,850 --> 00:02:00,450
because it could be completely valid.

29
00:02:00,470 --> 00:02:06,560
You know as long as it has a fully qualified domain at the end here so would be really nice to not have

30
00:02:06,560 --> 00:02:10,710
any default autocorrect on here to handle that.

31
00:02:10,760 --> 00:02:17,290
We can just pass a prompt to the text input here to disable that default auto correct functionality.

32
00:02:17,330 --> 00:02:26,820
So I'm going to pass in a additional prompt to the text input of auto correct false.

33
00:02:26,840 --> 00:02:30,310
So this says hey don't don't try to auto correct anything here.

34
00:02:30,320 --> 00:02:32,120
People are going to have crazy e-mails.

35
00:02:32,120 --> 00:02:33,370
Don't worry about it.

36
00:02:33,380 --> 00:02:38,800
So now if I start to do like you know test one or whatever.

37
00:02:39,500 --> 00:02:40,530
Ok I made a mistake.

38
00:02:40,530 --> 00:02:42,300
I may be kept busy.

39
00:02:42,320 --> 00:02:43,450
Let's get a shot.

40
00:02:45,440 --> 00:02:47,190
Just one.

41
00:02:47,230 --> 00:02:47,850
OK.

42
00:02:48,100 --> 00:02:49,960
My apologies my my mistake there.

43
00:02:50,090 --> 00:02:55,570
Autocorrect should have a capital C not a lowercase c and we just have to pass it the value false and

44
00:02:55,570 --> 00:03:01,010
then we won't get any validation here or any messages that the users passing in something funky.

45
00:03:01,030 --> 00:03:06,490
Now the other requirement here for e-mail tag we had said that we wanted to show a placeholder to the

46
00:03:06,490 --> 00:03:10,930
user something to approximate Hey you're supposed to put your email address in here or something beyond

47
00:03:10,930 --> 00:03:14,110
just the text or the label that says email.

48
00:03:14,140 --> 00:03:19,320
So to add a placeholder to a text input also very easy to add it just like auto correct.

49
00:03:19,330 --> 00:03:27,610
We just need to add an additional prompt to the text input so I'll add a additional Propp of placeholder

50
00:03:28,390 --> 00:03:33,970
and we need to make sure that we specify this placeholder on the fly or make it available for configuration

51
00:03:33,970 --> 00:03:35,330
from the parent component.

52
00:03:35,590 --> 00:03:40,780
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

53
00:03:40,780 --> 00:03:44,900
e-mail in here all of a sudden my input component is no longer usable.

54
00:03:45,220 --> 00:03:53,520
So instead we will receive a placeholder prop from our parent component.

55
00:03:53,550 --> 00:03:56,200
So get it out onto our props list right here.

56
00:03:56,870 --> 00:04:03,290
A placeholder like so and then we're going to flip back over to our log and form and make sure that

57
00:04:03,290 --> 00:04:05,480
we actually add that placeholder in.

58
00:04:05,480 --> 00:04:07,090
So here is my input.

59
00:04:07,370 --> 00:04:09,760
I will add in a placeholder.

60
00:04:10,080 --> 00:04:15,200
And you know you might think well put in place placeholder like email or something like that I love

61
00:04:15,200 --> 00:04:20,420
the pattern of placing in some realistic input for the user some realistic prompt.

62
00:04:20,450 --> 00:04:26,470
So instead of give them a more realistic prompt of you maybe your e-mail looks like user fetchmail that

63
00:04:26,470 --> 00:04:31,070
column just something to guide the user into thinking oh that's what this form of this input should

64
00:04:31,070 --> 00:04:34,540
be it should be something that looks like an email address.

65
00:04:34,970 --> 00:04:40,860
So now you refresh the simulator we see we've got a very nice looking placeholder in there right now

66
00:04:41,170 --> 00:04:45,830
and it's very easy for the user to understand OK you know I should probably click in there and start

67
00:04:45,830 --> 00:04:52,470
entering something in our voice has been a great little advance here.

68
00:04:52,490 --> 00:04:57,370
I think there's just one last little piece of housekeeping I want to take care of back inside of our

69
00:04:57,370 --> 00:04:58,470
log and form.

70
00:04:58,520 --> 00:05:04,900
We are currently stashing the value of the e-mail input on a piece of state called text.

71
00:05:04,910 --> 00:05:06,280
Now that's completely fine.

72
00:05:06,290 --> 00:05:08,010
You know nothing bad about that.

73
00:05:08,010 --> 00:05:11,780
Member the names of all these state properties are completely arbitrary.

74
00:05:11,810 --> 00:05:17,600
We can make them anything we want but very soon we're going to want to add in a nother text input to

75
00:05:17,600 --> 00:05:20,040
handle our email field as well.

76
00:05:20,150 --> 00:05:24,980
And at that point in time it's not really going to make sense to have like a text besides state and

77
00:05:24,990 --> 00:05:27,610
like password text or something like that.

78
00:05:27,650 --> 00:05:33,380
So I'm going to choose to just rename the prop here from or excuse me the name of the state property

79
00:05:33,680 --> 00:05:36,350
from text to e-mail.

80
00:05:36,410 --> 00:05:41,960
So it's very clear to anyone who looks at this in the future that this piece of state right here contains

81
00:05:41,960 --> 00:05:45,570
the user's e-mail address that they're trying to type in.

82
00:05:45,860 --> 00:05:49,630
So we need to also update some of our code down here as well.

83
00:05:49,850 --> 00:05:55,720
The input tag should now be pulling its value from this dot state DOT e-mail.

84
00:05:55,970 --> 00:06:01,760
And when we receive some amount of text from the onchange text callback we're no longer going to set

85
00:06:01,790 --> 00:06:03,770
a prop called Text.

86
00:06:03,810 --> 00:06:06,220
We're going to set a prop called e-mail.

87
00:06:06,260 --> 00:06:10,340
So take that text and set it on a proper e-mail.

88
00:06:10,370 --> 00:06:15,850
One other thing if you want to rename this Propp to e-mail as well and then maintain the shortened syntax

89
00:06:15,890 --> 00:06:18,560
that's completely you know definitely good.

90
00:06:18,680 --> 00:06:20,110
Good factor as well.

91
00:06:20,420 --> 00:06:23,100
Let's go ahead and do that just for the sake of completion.

92
00:06:23,360 --> 00:06:26,130
So we're going to say that rather than calling this argument text.

93
00:06:26,180 --> 00:06:28,320
I want to call it e-mail.

94
00:06:28,370 --> 00:06:30,340
Just a quick reminder in javascript.

95
00:06:30,350 --> 00:06:32,780
You can name your props anything you want.

96
00:06:32,810 --> 00:06:33,940
You can remain them on the fly.

97
00:06:33,940 --> 00:06:36,160
Doesn't matter whatever you want to be called.

98
00:06:36,290 --> 00:06:38,330
Go for it.

99
00:06:38,380 --> 00:06:43,290
Are you saying the argument did not mean to say Propp and the argument can be whatever I want to call

100
00:06:43,290 --> 00:06:43,730
it.

101
00:06:44,010 --> 00:06:46,490
Props have to be specially named anyways.

102
00:06:46,830 --> 00:06:49,510
So now I've got just the email Propp.

103
00:06:49,620 --> 00:06:57,180
I will remove the text tag and I'm relying on a little bit of E.S. 6 again of getting this expanded

104
00:06:57,180 --> 00:07:01,820
out to a full object of email Colan e-mail.

105
00:07:02,030 --> 00:07:02,880
All right.

106
00:07:02,880 --> 00:07:06,900
I think that's just about it for collecting e-mails from our user.

107
00:07:06,930 --> 00:07:09,200
So we're definitely in a good spot here.

108
00:07:09,210 --> 00:07:14,550
Let's continue in the next section and start handling a password from the user as well.