Complete Intro to React v4 Using the Consumer

[00:00:00]
>> Brian Holt: So imagine that we're building this pet adoption app. And one of your product manager comes in and says hey, we have this searchParams page that we force users to go to. But what happens if they wanna just stay in the results page and keep searching from there?

[00:00:18] What do we do, like could we just put the searchParams box as well on the results page, right? I can imagine that happening in a meeting, it might have literally happened to me in a meeting before, all right? So now you're thinking about, well, now I have to like replicate all of this component stuff and this is really dumb.

[00:00:34] I just wanna have one component that handles both of these things, the searchParams page, and the results page. Well, let me show you using context and components that we can make that happen. So what I want you to do is, I want you to make another component here called the SearchBox.js.

[00:00:53] And we're gonna put this both in the searchParams page and on the results page.
>> Brian Holt: Okay, searchParams as we know, we're just basically going to cut and paste this, everything that was in here into SearchBox.js. In fact if you want to just rename the file I don't care cuz we'll make another one.

[00:01:16] But I'm just gonna cut and paste this and I'm gonna put everything into searchbox.
>> Brian Holt: So everything is more or less the same, okay? So cut everything from searchParams, put it into SearchBox.js. And now we're gonna re-factor this, so this works. So delete petfinder we're doing all that in app.js so we don't need that anymore which means we only need animals.

[00:01:45] We can delete pf right there, okay? So that's it for the two imports up there. And then beneath that we're gonna import the consumer as well.
>> Brian Holt: From our SearchContext.
>> Brian Holt: Okay?
>> Brian Holt: So that's it for our imports, React, ANIMALS, and Consumer, make sure these curly braces are there, they are vital.

[00:02:22]
>> Brian Holt: Okay, and then we're gonna refactor just a tiny bit here. So the top level thing that we're going to do here is we're going to wrap everything in Consumer, which means the last thing down here at the bottom will be Consumer as well. So this is gonna help us make this available for all of the data from app available inside of our Consumer here.

[00:02:50] Next thing. This is a pattern in react called function as a child. So what we're gonna do is, we're gonna put curly braces here. And we're going to put a function inside of this. So if you wanted to see this for both, see I'm gonna put function(context), and then return, markup here, right?

[00:03:16] I'm going to make this a little bit more terse, but that's effectively what I'm gonna do. So its going to be context with an implicit return, like this. And then I'm gonna move all of my mark up that I have here, inside of this function.
>> Brian Holt: So I'll just cut that.

[00:03:44] I don't know how that happened, but.
>> Brian Holt: Okay, and then I'm gonna move that inside of the context here.
>> Brian Holt: And then reformat here cuz everything is all messed up. Does that make sense? So now I have this function that returns more markup. The reason why I've done this is because now context is in scope, right?

[00:04:11] So now I can reference the things that are on context, that's the powerful part here. If you remember, my title, you don't have to title this or you don't have to follow this.
>> Brian Holt: Come on. This is a valid component, right? It's a function that returns markup, right?

[00:04:35] So we're taking advantage of that fact here, that any function that returns markup is technically a component, right? So that's what we're doing here, we're using a function as a component here, that all it does is return whatever markup we were gonna do anyway, but it does it with context and scope, so now we can reference context.

[00:04:54] Does that make sense? Okay, I'm seeing mostly nods here. Some, just a couple people flipping me off, that's it.
>> Speaker 2: [LAUGH] You just say it one more time?
>> Brian Holt: Sure. So, I think it might be useful to figure out what context is. We have consumer, right? And if you look at our SearchContext here.

[00:05:18] The consumer is coming here from the SearchContext, right. So, this is the exit portal of context, right. And provider is the entrance portal, right. So, now let's go into app.js.
>> Brian Holt: Here in the provider, we're passing in this.state from app.js right? So we're throwing into the entrance portal this.state and what is this.state?

[00:05:47]
>> Brian Holt: All this stuff right? So if we go back to search box context, this context right here is the state from app. So now, we can reference contest.breed, context.animal. And it will be reflective of the state of app.js.