Learn React Hooks

Defining the consumer

Now, we have to define the consumer in our Header component. We are going to do this in the traditional way for now, and in the next steps use Hooks to define the consumer:

1. Create a new src/Header.js file
2. First, we have to import ThemeContext from the App.js file:

import React from 'react'import { ThemeContext } from './App'

3. Now, we can define our component, where we use the ThemeContext.Consumer component and a render function as children prop, in order to make use of the context value:

const Header = ({ text }) => (    <ThemeContext.Consumer>        {theme => (

4. Inside the render function, we can now make use of the context value to set the color style of our Header component:

            <h1 style={{ color: theme.primaryColor  ...