 I'd like to talk about modularizing context. In the previous example, we created two contexts, say person context and an organization context. We then stacked those on top of each other, both on the consuming side and then on the providing side in our application. But if this were a full-size application, it's very unlikely that we would have all of this in one place. So let's look into a strategy for modularizing our context and just for the sake of it, this component as well. So open up our file directory, give ourselves a little bit more room over here and we'll start with person context. We're gonna delete that line. We then create a new file called person context and in it we can paste our line from before. Context requires react, so we'll need to import that. And to finish this module up, we'll need to export both our context provider and our consumer. Now because person context here is just an object, we can destructure both of those components right off of it. So we're importing react, we're using it to create new context, which returns an object with a provider and consumer components, which we're then exporting. And we're exporting them as named exports. So back in our application, we need to import them. Import provider and consumer from person context. Now up to this point, we've been using property access syntax for both our providers and consumers. But the way we've imported them, that's no longer necessary. We've already split those out. So I can take person context off of this and also the provider. And we're back to success. But in doing that, we've kind of made this too generic. We have a little bit of problem. We're just using provider and consumer here. But now we can't really effectively moduleize this one, the organization context. Now fortunately, ES modules has a nice way of allowing us to rename things locally. So we'll call this as person provider and import this as person consumer. We'll need to update our app here and here as well, both the consumers and the providers. Now, if you missed that, I'm gonna reiterate. Here, I'm exposing these as just the generic provider and consumer. That's how they get exposed for import. But app side, wherever I include these, I can rename them on the fly by saying, I know you exported this thing, but I'd like to refer to it as this other name. In our case, person provider. Now we've freed up the namespace for us to moduleize organization context. Let's start by deleting the organization context in our application, creating a new file, organization context, and pasting that in. Again, we need react, so we'll import that. And again, we'll use object destructuring to pull off both the provider and the consumer. Finally, exporting those as provider and consumer. Back to our app, we can import those now. Import provider as organization provider and consumer as organization consumer. Finally, import those from dot slash organization context. Now we can update our business profile to organization consumer and our app to organization provider. Finally, the Pista resistance, this component here. We'll copy, delete that, create another file, business profile, paste that in. This file will also require react and export this component function. Now we're seeing these little squiggly errors, meaning that these are not defined, both the organization consumer and the person consumer. So we need to require those as well. We'll import the organization consumer as organization consumer from the organization context file. We'll just copy and paste that to get the person consumer from the person context file. Now we're getting a new error, so let's follow that. This thing business profile is not defined. That's because we removed it without defining it. So let's import that business profile from the business profile file, which leads us back to the business profile components. Click that and we can see that organization consumer is not being imported. You can see that here as well as the person consumer. Let's import that. Import consumer as organization consumer from the organization context file. That clears up better and now we're getting the person consumer error. So we'll import consumer as person consumer from the person context file. Now we're back in business. Now we have one thing left that we can do. Here we're importing both the provider and consumer for person and organization, but in this file we're really only using the providers. So we can delete those now. That was a lot of code motion. So I'd like to review what we have. We have an application and at this application level we are providing context values for a person and an organization, Michael and learnreact.com. Those contexts are not in this file. We've modularized them by putting them in different files. In the case of person, we're importing the provider as person provider from this file, person context, which we're doing the same for the organization, importing the provider as organization provider from the organization context. Both of those have their own file. In the case of the person, we import react. We use object destructuring to pull off those two components, the provider and consumer components from our created context. And we export those as named exports on this module. Exactly the same for the organization context. Now, additionally in our app, we import this business profile component from the business profile file. If we look at that, it imports react as well as the consumers from organization and person. We're assigning them to local identities of organization consumer and person consumer. If they were named just consumer, we would not be able to use both of them. Now, again, this is a prop list component. All of the data that it's getting to render out this H1 that we're seeing here is provided via context.