1
00:00:00,660 --> 00:00:02,660
We've got the basics of our form put together.

2
00:00:02,650 --> 00:00:06,560
So we're now going to start to add in some event handlers to our inputs.

3
00:00:06,630 --> 00:00:11,160
We're gonna put it on a submit handler for the form and make sure that whenever a user enters something

4
00:00:11,160 --> 00:00:15,630
and clicks that button right there or otherwise attempts to submit the form we ultimately make a request

5
00:00:15,630 --> 00:00:21,690
to our off service now in order to keep track of whatever user has typed inside these two inputs.

6
00:00:21,730 --> 00:00:24,400
We're going to need to keep track of some piece of state.

7
00:00:24,400 --> 00:00:28,490
So we're going to be using hooks on this project at the very top.

8
00:00:28,570 --> 00:00:35,180
I'm going to import the U.S. State hook from react then inside the component.

9
00:00:35,180 --> 00:00:40,630
I went to create two new pieces of state one called One email the other set.

10
00:00:40,630 --> 00:00:50,010
Email and I'll default out to be an empty string and then password and set password to empty string

11
00:00:50,070 --> 00:00:50,490
as well

12
00:00:53,420 --> 00:00:58,590
all then start to wire up these different pieces of state as values for these inputs along with some

13
00:00:58,830 --> 00:01:00,990
on change event handlers.

14
00:01:01,120 --> 00:01:10,930
So first on email I'll set the value as email and also put in an on change handler.

15
00:01:11,020 --> 00:01:16,690
I'm going to abbreviate the event argument too on change right here as simply e instead of event.

16
00:01:16,820 --> 00:01:22,040
Then we'll take a look at that even objects we'll look at Target dog value and use that to update our

17
00:01:22,040 --> 00:01:25,140
email piece of state using these set email function.

18
00:01:25,220 --> 00:01:26,010
So we'll do set.

19
00:01:26,030 --> 00:01:28,130
Email us in E.

20
00:01:28,130 --> 00:01:29,500
Target value.

21
00:01:29,500 --> 00:01:30,110
I can save this.

22
00:01:30,110 --> 00:01:33,900
You can see that entire line.

23
00:01:34,040 --> 00:01:35,060
Now looks good.

24
00:01:35,580 --> 00:01:42,270
I'll then repeat that same process for the password input down here as well I'll put in a value of password

25
00:01:44,230 --> 00:01:51,070
and then whenever the thing gets changed we'll take that event and call set password with e e dot target

26
00:01:51,130 --> 00:01:56,520
dot value.

27
00:01:56,550 --> 00:01:56,810
All right.

28
00:01:56,820 --> 00:01:59,460
So we're now tracking those two piece of states.

29
00:01:59,460 --> 00:02:03,780
Now the last thing we have to do is make sure that any time someone hits the enter key or either or

30
00:02:03,780 --> 00:02:08,670
it clicks that button down here at the bottom we want to handle the submission event coming off this

31
00:02:08,670 --> 00:02:14,490
form element that I'll put on an on submit even handler anytime user tries to submit the form.

32
00:02:14,490 --> 00:02:16,060
I will run a helper function.

33
00:02:16,080 --> 00:02:23,480
I'm going to simply call on submit and I'll define on cement right above.

34
00:02:23,630 --> 00:02:29,480
I'll take the event object coming out of that I can either refer to it as E or since we are in a long

35
00:02:29,480 --> 00:02:30,650
form function right here.

36
00:02:30,650 --> 00:02:37,790
I'll call it events instead just for clarity we're going to call prevent default on there to make sure

37
00:02:37,790 --> 00:02:42,920
that the form does not tried to submit itself to the browser and then right now let's just do a console

38
00:02:42,920 --> 00:02:55,760
log of the email and password we'll say this we will flip back over I going to open up my console and

39
00:02:55,760 --> 00:03:02,120
I'm going to enter in an email address of test at test dot com and a password of password a click on

40
00:03:02,180 --> 00:03:05,290
sign up and there's our stuff now.

41
00:03:05,300 --> 00:03:09,200
Right away you're going to notice that there's some like mystery stuff going on here.

42
00:03:09,290 --> 00:03:10,330
We can ignore.

43
00:03:10,340 --> 00:03:17,150
If you see like air and get something rebuilding or some deprecation notice we can ignore all that stuff

44
00:03:17,210 --> 00:03:18,120
for right now.

45
00:03:19,450 --> 00:03:24,940
Well without a doubt we can have some inputs being put inside of our form submit the form and then hey

46
00:03:24,970 --> 00:03:29,630
we got our actual email and password that we need to submit to the back end server.

47
00:03:29,650 --> 00:03:34,540
So at this point we need to figure out how we can get our application to somehow communicate with our

48
00:03:34,780 --> 00:03:35,780
service.

49
00:03:35,800 --> 00:03:39,910
So let's take a quick pause right here and then figure out how we can actually take that email and password

50
00:03:40,120 --> 00:03:42,010
and submit it to our backend in just a moment.