Pass Data With a Callback Through React Context
A Context Provider can only accept a single value, but it can be of any type. When you need to pass multiple values through Context, group them into an object. Here we’ll learn how to pass data along with a callback function for updating the data, so that children will be able to update their parents.
Instructor: [00:00] Right now, we're passing down the current user through context. It would be nice to be able to pass down the handleLogout and handleLogin functions along with it.
[00:09] We can do that by passing an object with the value. This object will have a user property, which is this.state.currentUser, an onLogin property, which is this.handleLogin, and an onLogout property, which is this.handleLogout.
[00:26] With this change in place, our app is going to break because now, instead of passing the user itself, we're passing an object where the user is a property. We have to go update all the places that consume the user to use this new object.
[00:37] Right now, that is just this avatar up here, which is under user menu. Here, we consume the user. What we'll do instead is destructure this object and pull out the user property. That'll make this work.
[00:53] Then we can go over to message list. Where we're pulling out user here, we can do the same thing, destructure the object, pull out the user property. Now this is working.
[01:04] Now we can go back to route and drill down to the components that need onLogout and onLogin and get those values from context. Since we're going to be providing this to both components, we can wrap both of them in context.
[01:20] Now into main page. We see it takes onLogout and passes it down to header. Header takes onLogout and passes it down to user menu. User menu uses the prop down here.
[01:33] We're already consuming the context. We just need to destructure and pull out the onLogout function. Then we can use onLogout down here. Now we can click this and log out.
[01:45] It's not working. Let's trace it back. We're getting onLogout from here. The only other place to look is the context. We're passing the onLogout prop, but we have a typo in the handleLogout function. This is supposed to be handleLogout with the lowercase O. If we change that, then this should work.
[02:05] Now we can get rid of the onLogout prop from all these components, the main page, and from header, and from here, and from here. We don't need to pass this a user menu either.
[02:19] Now let's go back to index. We can do the same for the onLogin prop. We'll go into login page. At the top, we'll import our UserContext.
[02:29] Then we'll wrap our content with UserContext.Consumer and use the render props pattern to destructure the onLogin property from the context object. We'll just wrap the rest of this and close the consumer.
[02:46] We're not done yet. While we're getting onLogin here, we're not actually using it inside render. We're using it up in handleSubmit. We need a way to get this onLogin function up to handleSubmit.
[02:58] What we'll do is change this function to accept an event and onLogin. Then we can use onLogin directly. Next, we'll change the onSubmit prop to be an arrow function that takes the event and calls handleSubmit with the event and the onLogin function that we got from context.
[03:18] With that in place, we can log out and try out our login. It works.