 Let's look at stacking context. In this example, I have a small application. I am providing context of a person and I'm rendering out a business profile component. The business profile component is context aware. So it knows about the person context and it is consuming the name value off of that. We can see it working over here. Now I'd like to update my app and my business profile to show organization the company I work for. Now that value is not defined. So let's start from the outside in. What I need in this case is an organization context consumer, opening and closing. React's telling me that's not defined, which it's not, so let's define it. We can copy our person context and rename it to organization. Let's change the default name to company. Now we're getting that proper consumer error saying that render is not a function, indicating that we need to give a function to our organization context consumer. We'll wrap what we already have, take organization as an argument and return what we had before. Now we're seeing Michael company, which means we just need to update our app and add the right provider. So in our application, we would add the organization context provider, change that name to learnreact.com and add a closing tag and everything works. Now one thing that is not important is the order in which these contexts are provided. So if I flip those around and provide the person first and the organization second, no difference. It's also the same up here. This is how we stack context.