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.
Instructions
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.