10. Working with Complex State

Activity 10.1: Migrating an App to the Context API

Solution:

Perform the following solution steps to complete this activity:

1. As a first step, create a store/cart-context.js file. This file will hold the context object and the Provider component that contains the cross-component state logic (which is exposed via the Provider component).
2. In the newly added cart-context.js file, create a new CartContext via React's createContext() function. To get better IDE auto-completion, the initial context value can be set to an object that has an items property (an empty array) and two methods: an (empty) addItem and an (empty) removeItem method. The created context also must be exported, so that it can be referenced by other project files.

This is the final cart-context.js file content (for the moment):

import { createContext } from 'react';
const CartContext = createContext({
  items: [],
  addItem...