1
00:00:03,000 --> 00:00:06,425
We designed a simple form for our SignInPage.

2
00:00:06,425 --> 00:00:09,241
Now let's wire in some functionality.

3
00:00:09,817 --> 00:00:12,411
We'll want to manage the form fields

4
00:00:12,411 --> 00:00:14,859
as controlled components in React.

5
00:00:15,431 --> 00:00:17,798
So let's create a state variable

6
00:00:17,798 --> 00:00:20,313
to hold and set the "email" value,

7
00:00:20,313 --> 00:00:22,237
using the "useState" hook.

8
00:00:22,884 --> 00:00:25,191
The initial value can be an empty string.

9
00:00:25,691 --> 00:00:27,543
Now let's duplicate this line

10
00:00:27,543 --> 00:00:30,926
and create another state variable for the "password".

11
00:00:31,489 --> 00:00:32,305
And with this

12
00:00:32,305 --> 00:00:35,071
we can set the "value" of the "email" Input.

13
00:00:35,633 --> 00:00:38,441
Except that Input is our own custom component,

14
00:00:38,941 --> 00:00:40,690
so we'll first need to pass

15
00:00:40,690 --> 00:00:43,540
the "value" prop down to the native element.

16
00:00:44,104 --> 00:00:45,951
And we'll also need to pass

17
00:00:45,951 --> 00:00:47,867
an "onChange" event handler,

18
00:00:47,867 --> 00:00:51,287
to update the value when the user types something.

19
00:00:51,923 --> 00:00:53,801
Now, if you're familiar with React

20
00:00:53,801 --> 00:00:55,679
you may know that, instead of this

21
00:00:56,234 --> 00:00:58,199
we could accept any "props"

22
00:00:58,199 --> 00:01:01,763
and just pass them all down to the native "input"

23
00:01:01,763 --> 00:01:03,509
using the spread syntax.

24
00:01:04,155 --> 00:01:06,617
This way we could accept any property

25
00:01:06,617 --> 00:01:09,212
supported by the standard HTML element,

26
00:01:09,212 --> 00:01:12,207
without adding each one of them individually.

27
00:01:12,207 --> 00:01:14,404
But the downside of this approach

28
00:01:14,404 --> 00:01:17,066
is that Visual Studio Code won't be able

29
00:01:17,066 --> 00:01:19,129
to infer which props we accept.

30
00:01:19,961 --> 00:01:21,947
So for this example I will actually

31
00:01:21,947 --> 00:01:23,650
declare each one individually,

32
00:01:24,206 --> 00:01:26,488
just so that we can see the right suggestions

33
00:01:26,488 --> 00:01:27,198
in the editor.

34
00:01:27,748 --> 00:01:29,577
There are other ways to declare

35
00:01:29,577 --> 00:01:32,586
which props are supported by a component of course,

36
00:01:32,586 --> 00:01:35,536
but this simple approach will do for this example.

37
00:01:36,153 --> 00:01:38,151
Anyway, the value here will be

38
00:01:38,151 --> 00:01:39,948
our "email" state variable.

39
00:01:40,515 --> 00:01:43,088
And then we want an "onChange" handler,

40
00:01:43,588 --> 00:01:46,502
that's a function that takes an "event" object

41
00:01:46,502 --> 00:01:48,338
and sets the "email" variable

42
00:01:48,902 --> 00:01:51,893
to the value we can get from the "event.target",

43
00:01:51,893 --> 00:01:54,323
that will be whatever the user entered.

44
00:01:54,885 --> 00:01:57,364
Now we want to do the same for the "password":

45
00:01:57,364 --> 00:01:58,712
set the "value" property.

46
00:02:01,385 --> 00:02:03,604
And add the "onChange" handler,

47
00:02:03,604 --> 00:02:06,394
but in this case calling "setPassword".

48
00:02:08,050 --> 00:02:10,572
Ok, so this is the standard way

49
00:02:10,572 --> 00:02:14,232
to have controlled input components in React,

50
00:02:14,232 --> 00:02:15,208
using hooks.

51
00:02:15,870 --> 00:02:18,867
Now we want to handle the form submission,

52
00:02:18,867 --> 00:02:19,794
so "onSubmit"

53
00:02:20,365 --> 00:02:23,327
we could pass a function called "handleSubmit",

54
00:02:23,327 --> 00:02:24,966
that doesn't exist yet but

55
00:02:24,966 --> 00:02:26,856
I'm going to create right now.

56
00:02:27,482 --> 00:02:29,455
So this takes an "event" object.

57
00:02:30,482 --> 00:02:32,572
And we can start by just logging

58
00:02:32,572 --> 00:02:35,314
the values that we should send to the API,

59
00:02:35,314 --> 00:02:37,338
that is "email" and "password".

60
00:02:39,982 --> 00:02:41,635
Let's see if this works.

61
00:02:41,635 --> 00:02:43,632
If I click the submit button,

62
00:02:43,632 --> 00:02:45,285
actually, this triggered

63
00:02:45,285 --> 00:02:48,246
a default form submission from the browser,

64
00:02:48,246 --> 00:02:49,967
so it reloaded this page.

65
00:02:50,742 --> 00:02:53,623
I forgot to call "event.preventDefault()"

66
00:02:53,623 --> 00:02:54,817
at the beginning,

67
00:02:55,542 --> 00:02:57,125
because we want to handle

68
00:02:57,125 --> 00:02:59,023
the form submission ourselves.

69
00:02:59,586 --> 00:03:01,702
Let's try again. This time we can see

70
00:03:01,702 --> 00:03:03,474
our log message in the console.

71
00:03:04,031 --> 00:03:05,886
And if we enter some values,

72
00:03:05,886 --> 00:03:09,330
oh yeah, the browser will validate the email address

73
00:03:09,330 --> 00:03:11,118
and warn that it's invalid.

74
00:03:11,750 --> 00:03:14,074
That's good, but if we want to do validation

75
00:03:14,574 --> 00:03:16,512
then we should also declare that

76
00:03:16,512 --> 00:03:18,025
that field is "required".

77
00:03:18,585 --> 00:03:21,286
And to do that we'll first need to add

78
00:03:21,286 --> 00:03:24,697
a "required" prop to our custom Input component.

79
00:03:28,651 --> 00:03:31,202
This way in the form we can declare that

80
00:03:31,202 --> 00:03:32,604
"email" is "required",

81
00:03:32,604 --> 00:03:34,708
and in fact so is the "password".

82
00:03:36,451 --> 00:03:39,014
Ok, so at this point we shouldn't be able

83
00:03:39,014 --> 00:03:40,702
to submit an empty "Email".

84
00:03:41,264 --> 00:03:42,646
We have to type something,

85
00:03:42,646 --> 00:03:44,772
but it also needs to be a valid "Email".

86
00:03:47,330 --> 00:03:48,875
And once we fix the email

87
00:03:48,875 --> 00:03:51,347
of course the password is also required.

88
00:03:51,908 --> 00:03:53,747
Only if we fill in both fields

89
00:03:53,747 --> 00:03:55,892
we can finally submit successfully,

90
00:03:56,453 --> 00:03:58,484
and we can see in the console logs

91
00:03:58,484 --> 00:04:01,291
that the state variables have the right values.

92
00:04:01,850 --> 00:04:04,903
Ok. So our form is now wired up correctly

93
00:04:04,903 --> 00:04:07,211
with the React component state,

94
00:04:07,211 --> 00:04:10,711
and we also have some form validation in place.

95
00:04:10,711 --> 00:04:13,093
We'll continue in the next video

96
00:04:13,093 --> 00:04:14,880
where we'll call the API

97
00:04:14,880 --> 00:04:17,486
to perform the login on submission.