1
00:00:00,394 --> 00:00:04,419
Now let's convert the UserSignUp Component
to a function Component.

2
00:00:04,419 --> 00:00:08,377
First, we'll import useState and
useContext from react.

3
00:00:08,377 --> 00:00:10,803
We can delete Component since
we won't use that anymore.

4
00:00:18,974 --> 00:00:23,039
Then we can import useHistory along
with Link from react-router-dom.

5
00:00:25,104 --> 00:00:28,603
Let's clean up the class syntax,= and
replace the word class with function.

6
00:00:33,353 --> 00:00:39,974
I will delete this as well,
And add parentheses here.

7
00:00:43,973 --> 00:00:45,953
Next, we'll delete this render method.

8
00:00:55,450 --> 00:00:56,584
Save.

9
00:01:00,039 --> 00:01:04,043
This component comes with several methods,
we'll add the keyword const to define

10
00:01:04,043 --> 00:01:06,574
these functions within
our functional component.

11
00:01:06,574 --> 00:01:09,574
And then place them all
above the return block so

12
00:01:09,574 --> 00:01:11,900
they are defined before being called

13
00:01:36,011 --> 00:01:37,439
We'll copy all of these.

14
00:01:43,611 --> 00:01:47,783
Paste them back above the return block.

15
00:01:47,783 --> 00:01:49,216
Let's save there.

16
00:01:51,259 --> 00:01:53,614
Now we won't delete the state just yet,

17
00:01:53,614 --> 00:01:57,987
as we'll use that to guide how we
initialize state with the useState hook.

18
00:01:57,987 --> 00:02:01,406
For each item in the state
we'll call useState and

19
00:02:01,406 --> 00:02:03,723
set the correct initial value.

20
00:02:03,723 --> 00:02:09,505
name, username, and password are all
empty strings, errors should be in array.

21
00:02:27,500 --> 00:02:30,474
I'll paste in the rest of the code
from the teachers notes here

22
00:02:36,573 --> 00:02:38,117
Now we can delete the state.

23
00:02:43,332 --> 00:02:46,272
Now, let's replace
the setState function with

24
00:02:46,272 --> 00:02:49,363
the state updater function
returned by useState.

25
00:03:02,965 --> 00:03:07,538
Currently, the function that
sets the state on change uses

26
00:03:07,538 --> 00:03:10,745
the name of the variable to set the state.

27
00:03:10,745 --> 00:03:14,658
Since our state variables now
have their own update functions,

28
00:03:14,658 --> 00:03:19,006
we'll use a switch statement to decide
which state variable is updated

29
00:03:19,006 --> 00:03:21,847
based on the name of
the target input element.

30
00:03:21,847 --> 00:03:26,240
I've included this code in the teacher's
note as well as an example that uses

31
00:03:26,240 --> 00:03:35,053
the more familiar if else statement. We'll
replace the body of the change function.

32
00:03:35,053 --> 00:03:37,724
Here, save.

33
00:03:40,595 --> 00:03:45,586
We can also delete the statement assigning
values to name username, password, and

34
00:03:45,586 --> 00:03:50,102
errors in the submit function since
these variable names are now the state.

35
00:03:53,813 --> 00:03:57,496
We'll need to include the context here in
UserSignUp as well.

36
00:03:57,496 --> 00:04:01,002
Pause the video and try to repeat
the steps from the previous challenge.

37
00:04:03,686 --> 00:04:08,584
Make sure to import context from
the context file, then store context and

38
00:04:08,584 --> 00:04:11,117
a variable with the useContext hook.

39
00:04:13,208 --> 00:04:17,928
This component uses the history object
to reroute the user once signed up.

40
00:04:17,928 --> 00:04:22,727
We don't have access to the history via
props anymore in a function component,

41
00:04:22,727 --> 00:04:25,961
but we have a useful hook that
can give us access to it.

42
00:04:25,961 --> 00:04:28,826
We can use the useHistory hook.

43
00:04:28,826 --> 00:04:32,363
Since we already imported
the useHistory hook.

44
00:04:32,363 --> 00:04:37,085
Now, we'll create an instance of history
by assigning a variable the value

45
00:04:37,085 --> 00:04:39,907
returned from a call to
the useHistory hook.

46
00:04:53,563 --> 00:04:58,185
Next, we'll delete this.props from
before each instance of history.

47
00:05:09,178 --> 00:05:12,972
It looks like we're getting an error
because we're still using the this

48
00:05:12,972 --> 00:05:13,540
keyword.

49
00:05:13,540 --> 00:05:17,388
Because we're no longer
using class components,

50
00:05:17,388 --> 00:05:20,348
we can get rid of each instance of this.

51
00:05:20,348 --> 00:05:24,964
By leaving the Replace field empty,
we can remove any reference to this.,

52
00:05:24,964 --> 00:05:26,852
in our UserSignUp component.

53
00:05:31,364 --> 00:05:34,184
And we'll run our code
again in the browser.

54
00:05:34,184 --> 00:05:36,596
Let's see if we can still
successfully create a user.

55
00:05:44,284 --> 00:05:49,882
Perfect, our app is still working and
the code is much cleaner.

56
00:05:49,882 --> 00:05:54,086
I hope you're able to complete this
React Hooks Practice session successfully.

57
00:05:54,086 --> 00:05:56,214
If not, that's okay.

58
00:05:56,214 --> 00:05:59,140
Try to start over and write it again
without looking at my solution.