Pass Data Between React Components with the useContext Hook
React hooks provide a new way to access the data and functions stored in context with the useContext hook.
In this lesson, we'll create a login form and store the user data in a context called UserContext that we create the typical way - with React.createContext(). We'll also provide that context to our app the typical way - by wrapping our app with <UserContext.Provider>.
But then, in our child components, we'll use useContext to pull out the value stored in the UserContext. Then, we can display that value, and use the function that we set in the context to change the user value.
Chris Achard: [00:00] I have some user information being created with a useState hook call. I want to give other parts of my application access to that.
[00:07] I'm going to create a UserContext with React.createContext. Then I need to wrap my app in that UserContext.Provider. To that provider, I have to pass a value.
[00:23] The value I'm going to pass is the object containing user and setUser that I get from this useState. If I had a different component called UserDetails, and here I wanted to return the user's name, then first I could import useContext from React.
[00:45] Then I could pull out the value from the context called UserContext. This context may come from a different file, but right now it's just defined in the same file. Its value is going to be the same thing we defined down here. It's actually the object containing user and setUser.
[01:03] I'm going to pull those out by destructuring them. I can use this value directly to show the user name. If I take this component and use it in my app and save it, now I can see the value Me, which comes from here, it's pass through this context. I'm using useContext to pullout. Not only that though, but we can set the user with setUser.
[01:28] Let's say we had another react component called login. Let's give that an input. We're going to make a login form here. We're going to do the same thing. We are going to pullout the current user and the setUser from the context UserContext.
[01:49] Because we have an input here and we want to make it a controlled component, we also need an interim value. I'm going to call that loginNme and setLoginName. That's just regular useState.
[02:00] On the input, I can set the value to loginName. On change, I want that to set the login name to the e.target.value. The placeholder can just be login name. We can make a button called login. On the click of that button, that's where we're going to use this setUser function. We can call setUser with the current loginName.
[02:31] Now we could use this down here. If the user exists, then we can show the user details. Otherwise, let's show that login form. We have to remove this default value to see that so we can save it, and now we get the login form.
[02:47] If I type my name and click login, then I can see my username. We could also use that setUser function up here. Say we wanted a logout button, we could say logout, and the onClick for that button would just have to set the user to null. Let's save that.
[03:08] We can login. We get our user information, and we can logout, taking us back to the login page.