Learn React Hooks

Using a State Hook with the context provider

First, we are going to define a new State Hook, which we are going to use to set the value for the context provider.

Let's define a State Hook, and use it in the context provider:

1. Edit src/App.js, and import the useState Hook:

import React, { useReducer, useEffect, useState } from 'react'

2. Define a new State Hook at the beginning of the App component; here we set the default value to our default theme:

export default function App () {    const [ theme, setTheme ] = useState({        primaryColor: 'deepskyblue',        secondaryColor: 'coral'    })

3. Then, we pass the theme value to the ThemeContext.Provider component:

    return (        <ThemeContext.Provider value={theme}>

Our app is still going to look the same way ...