Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Practice Hooks in React

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Solution part 1: useContext

2:51 with Reggie Williams

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 up

    Related 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 up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up