Learn React Hooks

Defining the provider

Contexts use the default value that is passed to React.createContext, when there is no provider defined. This is useful for debugging the components when they are not embedded in the app. For example, we could debug a single component as a standalone component. In an app, we usually want to use a provider to provide the value for the context, which we are going to define now.

Edit src/App.js, and in our App function, we simply wrap the Header component with a <ThemeContext.Provider> component, where we pass coral as primaryColor:

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

We can now see that our header color changed ...