1
00:00:01,170 --> 00:00:03,450
Visually our form is definitely coming together.

2
00:00:03,450 --> 00:00:06,770
So now it's time to handle the data side of this form as well.

3
00:00:06,840 --> 00:00:11,730
So we need to make sure that we create two pieces of state inside this component one piece of state

4
00:00:11,730 --> 00:00:13,150
to manage this input.

5
00:00:13,350 --> 00:00:18,480
A second one for this input and we'll want to make sure that anytime user taps on sign up we attempt

6
00:00:18,480 --> 00:00:23,250
to take those two pieces of state and then submit them to our back and server in order to create a new

7
00:00:23,250 --> 00:00:24,620
user account.

8
00:00:24,690 --> 00:00:29,970
So let's first get started by wiring up some state to both of our input elements at the top off Find

9
00:00:29,970 --> 00:00:34,440
My import from react and add on an import for you state.

10
00:00:34,510 --> 00:00:39,280
So now we can use that you state hook to create two pieces of state.

11
00:00:39,520 --> 00:00:49,530
So the first one I'll call email and set email and I'll use the default value of an empty string and

12
00:00:49,530 --> 00:00:56,430
then I'll do password and set password with you state as well.

13
00:00:56,460 --> 00:01:00,720
Now we can wire those up to both of our different inputs on the first inputs.

14
00:01:00,750 --> 00:01:10,580
I'll put in a value of email and whenever a user changes this input the on change text callback will

15
00:01:10,580 --> 00:01:17,250
be invoked so whenever that gets called Remember this is going to be a function that gets called with

16
00:01:17,250 --> 00:01:23,070
the new email so we can take that new email and call set email with it.

17
00:01:23,090 --> 00:01:28,370
So set email with new email if we wanted to we can condense that prop.

18
00:01:28,370 --> 00:01:31,130
However we don't really have to put in this entire function right here.

19
00:01:31,130 --> 00:01:37,600
The code you see right there would be equivalent to just passing in set email directly without any parentheses.

20
00:01:37,610 --> 00:01:43,400
Now any time on change text is called react is gonna essentially take that new text or that new email

21
00:01:43,640 --> 00:01:45,350
and pass it directly into set.

22
00:01:45,380 --> 00:01:52,330
Email for us now we can do the same thing on input for password as well so on this one I'll give myself

23
00:01:52,330 --> 00:01:53,370
some space right away.

24
00:01:55,450 --> 00:02:03,900
I'll put in a value of password and on change text of set password.

25
00:02:03,940 --> 00:02:07,470
So let's now save this and we'll just make sure that we can still type in there.

26
00:02:07,480 --> 00:02:12,260
Yep definitely can now right away as soon as I start typing I'm noticing a couple of issues.

27
00:02:12,430 --> 00:02:12,940
First off.

28
00:02:12,940 --> 00:02:16,090
Notice how I've got that auto capitalization on ISIS.

29
00:02:16,150 --> 00:02:21,430
Once again we said many times inside this course that anytime we're handling with a or dealing with

30
00:02:21,430 --> 00:02:27,860
an email or password we really don't want to have any form of auto capitalization or auto correct.

31
00:02:27,910 --> 00:02:33,570
So let's make sure that we add in some props to both our inputs and remove that functionality.

32
00:02:33,630 --> 00:02:38,500
It's on both my inputs I can once again give myself some space here my code for matter took it away

33
00:02:38,500 --> 00:02:39,470
from me.

34
00:02:39,580 --> 00:02:44,140
So on email I'll put an auto capitalize of none.

35
00:02:44,590 --> 00:02:51,560
And auto correct of false then we can use both those on our password as well.

36
00:02:51,780 --> 00:02:52,710
So on the second one

37
00:02:55,880 --> 00:03:00,860
I'll copy paste in those two properties as well OK.

38
00:03:00,900 --> 00:03:02,170
So now we can say this once again.

39
00:03:02,230 --> 00:03:03,790
And now when I start to type in here.

40
00:03:03,810 --> 00:03:04,050
Yeah.

41
00:03:04,050 --> 00:03:04,260
No.

42
00:03:04,260 --> 00:03:05,100
Auto correct.

43
00:03:05,100 --> 00:03:07,500
No auto capitalization.

44
00:03:07,530 --> 00:03:09,320
Now the last thing I think we need to take care of.

45
00:03:09,450 --> 00:03:14,640
Whenever I put in a password here it's showing up as plain text which is definitely probably not what

46
00:03:14,640 --> 00:03:20,400
we want we probably want to show some like hidden stars whenever user types in there or puts any input

47
00:03:20,400 --> 00:03:24,820
in so that someone else can't just look over our user shoulder and steal their password.

48
00:03:24,960 --> 00:03:29,880
So to make sure that this text input right here shows up as kind of a password appropriate one we can

49
00:03:29,880 --> 00:03:37,710
add in one additional profit to our password input that additional prop is going to be secure text entry

50
00:03:37,980 --> 00:03:43,770
like So remember if we just write out the prop name that's equivalent to saying secure text entry is

51
00:03:43,770 --> 00:03:44,730
true.

52
00:03:44,730 --> 00:03:48,660
So just a shortcut to write out the prop name by itself.

53
00:03:48,780 --> 00:03:52,290
Now we'd save this and we attempt to type in the password.

54
00:03:52,380 --> 00:03:54,000
We've now got that protected input.

55
00:03:54,180 --> 00:03:56,230
Definitely what we want.

56
00:03:56,320 --> 00:03:58,440
I'll do a quick test on Android as well.

57
00:03:58,610 --> 00:04:03,140
So over here I can put in my email and my password.

58
00:04:03,140 --> 00:04:05,510
Yep looking good OK.

59
00:04:05,570 --> 00:04:08,330
So I think that's good to start for our two inputs.

60
00:04:08,330 --> 00:04:10,850
So now that we have some state variables here.

61
00:04:11,150 --> 00:04:15,620
Email and password whenever user taps on that button we're going to want to make sure that we attempt

62
00:04:15,620 --> 00:04:18,720
to make a API request and sign up our user.

63
00:04:18,920 --> 00:04:23,660
Now handling that means that we need to make use of access once again to make a network request to our

64
00:04:23,660 --> 00:04:28,370
server and it probably means that we also want to start to think about the overall structure of data

65
00:04:28,610 --> 00:04:31,060
at a higher level inside of our app as well.

66
00:04:31,100 --> 00:04:33,160
So as usual let's take a quick pause come back.

67
00:04:33,160 --> 00:04:37,690
The next video and start to discuss how we're going to kind of structure data handling inside of this

68
00:04:37,690 --> 00:04:37,940
app.