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.