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
Use the `useContext` hook to solve the first challenge. After that, prepare for the second challenge.
Resources
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
Were you able to complete
the challenge on your own?
0:00
Nice job, if not, no worries,
I'll show you how I solved it.
0:03
First, in Authenticated.js,
we'll import useContext along with React.
0:07
Then, we'll import the context directly
from the file it's created in.
0:18
The useContext hook takes the context
object as an argument and
0:32
returns the current context.
0:36
Inside our component, let's assign
the context to a variable by setting it
0:43
equal to the useContext hook with the
context object, passed in as an argument.
0:47
We use Context.Context here, so
1:05
we can access the context
object in the context file.
1:08
Let's remove the props here since we
don't need these anymore in the function
1:13
component, Save.
1:17
Back in AppJS, we can remove the call
to withContext that takes authenticated
1:19
as an argument and pass the authenticated
component into our PrivateRoute.
1:24
When we refresh our app in the browser,
our header still displays
1:40
the name of the current user and
our code is now a bit cleaner.
1:45
Now, for the next part of this challenge,
1:49
the UserSignUp component is
currently a class component.
1:52
You will need to refactor it to
a function component that uses hooks.
1:56
The UserSignUp component uses state,
context and
2:01
the history object,
which hooks do you think you'll need?
2:04
If you guessed useState and useContext,
you have a good grasp on the React hooks
2:08
naming conventions, you're also well
on your way to solving this challenge.
2:14
It's important to keep in mind that when
you convert the component from a class to
2:19
a function, you'll no longer have access
to the history object via history prop.
2:23
React router has a special hook you
can use to access history from inside
2:28
a function, it's called useHistory.
2:33
And I've posted information about
it in the Teachers Notes to
2:35
help you with this next challenge,
be sure to review and
2:39
use these three hooks to convert
UserSignUp into a function component.
2:42
In the next video,
I'll show you my solution.
2:47
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