Learn React Hooks

Nested providers

With React context, it is also possible to define multiple providers for the same context. Using this technique, we can override the context value in certain parts of our app. Let's consider the earlier example, and add a second header to it:

1. Edit src/App.js, and add a second Header component:

const App = () => (    <ThemeContext.Provider value={{ primaryColor: 'coral' }}>        <Header text="Hello World" />        <Header text="This is a test" />    </ThemeContext.Provider>)export default App

2. Now, define a second Provider component with a different primaryColor:

const App = () => (    <ThemeContext.Provider value={{ primaryColor: 'coral' }}>        <Header text="Hello World" />        <ThemeContext.Provider value={{ primaryColor: 'deepskyblue' }}>            <Header ...