React Projects

Nesting Context

Just as for the list data, the item data could also be stored in Context and passed to the components that need this data. That way, data is no longer fetched from any of the rendered components but from the ContextProvider components in the src/Providers directory:

1. Again, start by creating a new component where both a Context and Provider are created. This time, it's called ItemsContextProvider, which can also be added to the src/Context directory in a file called ItemsContextProvider.js:

import React from 'react';import withDataFetching from '../withDataFetching';export const ItemsContext = React.createContext();const ItemsContextProvider = ({ children, data }) => (  <ItemsContext.Provider value={{ items: data }}> { children ...