Learn React Hooks

Creating the Header component

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, ...