"Git Basics" was retired on February 8, 2019. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice Hooks in React !
You have completed Practice Hooks in React !
Preview
Complete the final challenge using the `useContext`, `useState` and `useHistory` hooks.
Switch Statement
switch (event.target.name) {
case "name":
setName(value);
break;
case "username":
setUser(value);
break;
case "password":
setPass(value);
break;
default:
return;
}
Treehouse Course on switch statements
if else
if (event.target.name === 'name') {
setName(value);
}
else if (event.target.name === 'userName') {
setUser(value);
}
else if (event.target.name === 'name') {
setPass(value);
}
else {
return;
}
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up