Preview
Video Player
00:00
00:00
Solution part 2: useState and useHistory
6:06Complete the final challenge using the `useContext`, `useState` and `useHistory` hooks.
Now let's convert the UserSignUp Component
to a function Component.
0:00
First, we'll import useState and
useContext from react.
0:04
We can delete Component since
we won't use that anymore.
0:08
Then we can import useHistory along
with Link from react-router-dom.
0:18
Let's clean up the class syntax,= and
replace the word class with function.
0:25
I will delete this as well,
And add parentheses here.
0:33
Next, we'll delete this render method.
0:43
Save.
0:55
This component comes with several methods,
we'll add the keyword const to define
1:00
these functions within
our functional component.
1:04
And then place them all
above the return block so
1:06
they are defined before being called
1:09
We'll copy all of these.
1:36
Paste them back above the return block.
1:43
Let's save there.
1:47
Now we won't delete the state just yet,
1:51
as we'll use that to guide how we
initialize state with the useState hook.
1:53
For each item in the state
we'll call useState and
1:57
set the correct initial value.
2:01
name, username, and password are all
empty strings, errors should be in array.
2:03
I'll paste in the rest of the code
from the teachers notes here
2:27
Now we can delete the state.
2:36
Now, let's replace
the setState function with
2:43
the state updater function
returned by useState.
2:46
Currently, the function that
sets the state on change uses
3:02
the name of the variable to set the state.
3:07
Since our state variables now
have their own update functions,
3:10
we'll use a switch statement to decide
which state variable is updated
3:14
based on the name of
the target input element.
3:19
I've included this code in the teacher's
note as well as an example that uses
3:21
the more familiar if else statement. We'll
replace the body of the change function.
3:26
Here, save.
3:35
We can also delete the statement assigning
values to name username, password, and
3:40
errors in the submit function since
these variable names are now the state.
3:45
We'll need to include the context here in
UserSignUp as well.
3:53
Pause the video and try to repeat
the steps from the previous challenge.
3:57
Make sure to import context from
the context file, then store context and
4:03
a variable with the useContext hook.
4:08
This component uses the history object
to reroute the user once signed up.
4:13
We don't have access to the history via
props anymore in a function component,
4:17
but we have a useful hook that
can give us access to it.
4:22
We can use the useHistory hook.
4:25
Since we already imported
the useHistory hook.
4:28
Now, we'll create an instance of history
by assigning a variable the value
4:32
returned from a call to
the useHistory hook.
4:37
Next, we'll delete this.props from
before each instance of history.
4:53
It looks like we're getting an error
because we're still using the this
5:09
keyword.
5:12
Because we're no longer
using class components,
5:13
we can get rid of each instance of this.
5:17
By leaving the Replace field empty,
we can remove any reference to this.,
5:20
in our UserSignUp component.
5:24
And we'll run our code
again in the browser.
5:31
Let's see if we can still
successfully create a user.
5:34
Perfect, our app is still working and
the code is much cleaner.
5:44
I hope you're able to complete this
React Hooks Practice session successfully.
5:49
If not, that's okay.
5:54
Try to start over and write it again
without looking at my solution.
5:56