First, we create a new Header component, which is going to display React Hooks Blog in the primaryColor of our app.

Let's create the Header component now:

1. Create a new src/Header.js file.
2. In this file, we import React, and the useContext Hook:

import React, { useContext } from 'react'

3. Next, we import the ThemeContext from the previously created src/contexts.js file:

import { ThemeContext } from `'./contexts'

4. Then, we define our Header component, and the Context Hook. Instead of storing the context value in a theme variable, we use destructuring to directly extract the primaryColor value:

const Header = ({ text }) => {
    const { primaryColor } = useContext(ThemeContext)

5. Finally, we return the h1 element, as we did before in our small example, and export the Header component:

    return <h1 style={{ color: primaryColor }}>{text}</h1>
}

export default Header

Now our Header component is defined, and we can use it.