 I'd like to remove everything that we have learned so far and create an entirely new example in illustration of where context comes into play. My son is 7 and I've always said that he's allowed a few tasteful expletives. Shit is on that list. I can define that as a default context. Let that expletive context equal react dot create context. Shit. I can then make a component for exclamations. In bold text it'll say o props dot word. We can then write another component that wraps this exclamation component in context. We use the expletive context consumer, opening and closing tags and provide it a function for render. It'll take the context value which we can name anything word in this case and return our exclamation component assigning the context word to word. Now let's use it in our app. We render contextual exclamation and without fail we get oh shit. Now the cool thing is is that we didn't pass any props here. In fact we can actually delete this props because we're not taking props and we're not using props. We're just using this context consumer and because we're not using a provider we get this default value. Now not everyone is okay with my son saying oh shit and I tell him that. I say not everyone likes the word shit. So if you're around someone who doesn't use the word poop instead. Now let's model that using components. Now we know that our expletive context also comes with a provider. We can wrap any context consumers in a provider and we get that provider through expletive context. So expletive context dot provider opening and closing tags. We're not providing a value on the provider so we get undefined right here so we just have oh let's provide a value poop and in this context and in this context alone will be the value poop on our contextual exclamation component. If we wrap this whole thing up in another layer we can actually provide multiple contexts and multiple consumers. Here we see that we get the default value and then in this context alone stink and in this context poop. Now like we did with our contextual exclamation where we use the context consumer to wrap a functional component we can do the same with context providers. Go down here and copy what I have here. Now one person that prefers that my son use poop instead of shit is his grandmother. So let's make a component called grandma's house. This is where we will put the poop context provider. Now we'll have to make a couple changes to this for example children is always going to be dynamic. We'll get that value off of props props dot children and if we're using props we have to take props as an argument. Now in our app we can replace expletive context provider with grandma's house and because it already provides the context value we don't have to. So we'll come down and copy this contextual exclamation and see that at grandma's house our exclamation is oh poop but outside of grandma's house it's oh shit.