Learn React Hooks

Implementing the Context Hook for the Post component

Next, we want to display the Post headers in the secondary color. To do this, we need to define a Context Hook for the Post component, as follows:

1. Edit src/post/Post.js, and adjust the import statement to import the useContext Hook:

import React, { useContext } from 'react'

2. Next, we import the ThemeContext:

import { ThemeContext } from '../contexts'

3. Then, we define a Context Hook in the Post component, and get the secondaryColor value from the theme, via destructuring:

export default function Post ({ title, content, author }) {    const { secondaryColor } = useContext(ThemeContext)

4. Finally, we use the secondaryColor value to style our h3 element:

    return (        <div>            <h3 style={{ color: ...