In the last exercise, you learned how to create a React context object. You also learned how to assign the context’s .Provider component a value prop so descendants can access that value. But what if we want to reuse the same context multiple times, such as to use different themes in different sections of our application?

A .Provider component may be reused with the same context multiple times in an application with different values. This is particularly useful if the context is rendered by a component that is used multiple times throughout the application. Each instance of the component might want to give a different value to the context. For example, a component might render two .Provider components that each receive a different value:

const GreetingContext = React.createContext(); const ChildComponent = () => { const greeting = useContext(GreetingContext); return <h2>{greeting}</h2> } const MyComponent = () => { return ( <> <GreetingContext.Provider value="bonjour le monde!"> <ChildComponent /> </GreetingContext.Provider> <GreetingContext.Provider value="hallo welt!"> <ChildComponent /> </GreetingContext.Provider> </> ); };

Let’s change the way our application uses its ThemeContext by rendering its .Provider component with a different value prop for each of the contact sections.



Our previous version of ContactsApp renders a single <ThemeContext.Provider> around all its children. Replace that single Provider with one wrapped around each of the <ContactsSection> components.


Change the value prop on one <ThemeContext.Provider> from "light" to "dark". Now, one section should be light, and the other dark.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?