This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Using the Provider" Lesson
[00:00:00]
>> Brian Holt: So the first thing after we do after we create the context is we're going to go put the provider into place.
>> Brian Holt: So I want you to go to App.js,
>> Brian Holt: And we're gonna come up here to the top,
>> Brian Holt: And we're going to import two things.
[00:00:21] Import pf from "petfinder-client", and we're going to import the provider,
>> Brian Holt: From ./SearchContext.
>> Brian Holt: So the easiest way to be able to set this up is using the state from app, right. So we have context, right, but the actual storage mechanism of everything on context is actually just going to be the app state on app, right, the state that's on app, rather.
[00:01:07] So we have the context, right. The context is going to be reading from app state, and then providing that into the portal, right, into the provider. And then on the other end we'll be reading from app state using the consumer. So it's still the same familiar mechanisms, context really is nothing more than just the portal entrance and exit.
[00:01:31] Everything is still managed by React's state. So we're gonna move all the state into,
>> Brian Holt: This, into app. So props, super props. I'm doing this with a constructor because this is going to be a lot easier to do using the constructor.
>> Brian Holt: Okay, and then this.state is going to be location, and it's gonna be all of our defaults again.
[00:02:03] So Seattle, WA, animal, empty string, breed, empty string, breeds
>> Brian Holt: Which is gonna be an empty array. But we're gonna take this a little bit step further, we're actually gonna be storing our functions on the state so that we can provide those into the context as well. So handle animal change will be this.handleAnimalChange, which we'll define here in a second.
[00:02:41] handleBreedChange which will be this .handleBreedChange. And getBreeds will be on here, and handleLocation can change. handleLocationChange which will be this.handleLocationChange and then getBreeds as well. getBreeds will be this.handleBreedChange. No, sorry, this.getBreeds.
>> Brian Holt: Okay, now we're gonna go lift all of this logic that we already wrote for results and we're going to move it into app, right.
[00:03:18] So actually just want you to go and copy and paste these four methods out of results and move them into app.
>> Brian Holt: So I wonder if the useful way of doing that is splitting my screen here, oops. So I'm going to open here, results.
>> Brian Holt: Sorry, not results, this is all in SearchParams.
[00:03:53]
>> Brian Holt: Okay, so I'm just gonna copy all of this data or all these methods.
>> Brian Holt: X, okay. So I took all of that out and now back here in app.js, I'm just gonna put it between the constructor and the render.
>> Brian Holt: Okay, and then I'm gonna delete everything, all the state here.
[00:04:24] From search params, we'll go fix this in a second as well.
>> Brian Holt: Okay, any questions about what I did? I just moved all those methods from search params into app.js.
>> Brian Holt: So this all works the same way, the events look the same, it's still calling setState, but it's all just doing it in here.
[00:04:56] So now we have the provider up here, so we're going to wrap the router here. So wrap this router in the provider.
>> Brian Holt: And the value of this provider is dis.state.
>> Brian Holt: So now magically, anything that's inside of this provider, I can access this context using the consumer that I exported in search.context anywhere.
[00:05:36] Anywhere that I call that I instantiate that consumer, that context, this state up here is going to be available. So in this particular case I'm only showing you one context, right, but as you may imagine you might have multiple different kinds of context, right. This is all the search parameters, but what happens if we had maybe a user context, right?
[00:06:00] Where we have all of our user information stored on a context, we could have multiple different providers here. All you have to do is just wrapping providers around providers around providers around providers, right, and that's how that would work.