Pass Data With a Callback Through React Context

Dave Ceddia
InstructorDave Ceddia

Share this video with your friends

Send Tweet
Published 4 years ago
Updated 3 years ago

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.

Dave Ceddia
Dave Ceddiainstructor
~ 3 years ago

Note: The 'before' code for this lesson is the code from the previous lesson.

Konekoya
Konekoya
~ 3 years ago

There's a typo in 01:04 transcript -> Provier should be Provider

Tobiah Rex
Tobiah Rex
~ 3 years ago

What plugin (or something else) are you using to go to the Component Definition on click? I use Atom and the plugin I've used previously was goto-definition, however the project is deprecated. Would like something more reliable, with the additional underline before click. Thanks!

Dave Ceddia
Dave Ceddiainstructor
~ 3 years ago

I'm using Visual Studio Code here, and I think it does this out of the box. The shortcut is Command-Click on a Mac.

Tobiah Rex
Tobiah Rex
~ 3 years ago

I'm using Visual Studio Code here, and I think it does this out of the box. The shortcut is Command-Click on a Mac.

Ah, got it. Looks like i'll stick with what I've got for now then as Atom doesn't have that feature built-in. Thanks for the prompt reply. Awesome course btw!!

Hallya
Hallya
~ 3 years ago

Hey Dave ! What extension or shortcut do you use to delete the whole expression by simply having cursor on it ?

Dave Ceddia
Dave Ceddiainstructor
~ 3 years ago

@Hallya Not sure which spot you mean specifically, but I'm using vscode-vim and vim has some useful commands like ci{ to change the text inside braces, or ci" to change the text inside quotes. It might also be video editing 😄

Hallya
Hallya
~ 3 years ago

@Dave like at 2:10, Ok cool, will check on vscode-vim to see what it can do :)