Creating an application Context

If you look at the current structure of the routes in your App component, you can imagine that this will get messy if you add more Providers and Consumers to your application. State management packages such as Redux tend to have an application state where all of the data for the application is stored. When using Context, it's possible to create an application Context that can be accessed using the useContext Hook. This Hook acts as a Consumer and can retrieve values from the Provider of the Context that was passed to it. Let's refactor the current application to have an application Context:

1. Start by creating a file called AppContext.js in the src/context directory. This file will import both ListsContextProvider and ItemsContextProvider, nest them, and have them wrap any component that will be passed to it as a children prop:

   import { ListsContextProvider } from './ListsContext';
   import { ItemsContextProvider } from '...