Learn React Hooks

Creating the StateContextWrapper

For the other Hooks, which make use of the StateContext, we have to define another wrapper to provide the StateContext to the Hooks.

Let's now define the StateContextWrapper component with the following steps:

1. Edit src/hooks/testUtils.js and adjust the import statements to import the useReducer Hook, the StateContext, and the appReducer function:

import React, { useReducer } from 'react'import { StateContext, ThemeContext } from '../contexts'import appReducer from '../reducers'

2. Define a new function component called StateContextWrapper. Here we are going to use the useReducer Hook to define the app state, which is similar to what we did in the src/App.js file:

export function StateContextWrapper ({ children ...