React: How to use multiple Contexts of the same type while allowing children to read data from all of them

I have a certain Context setup similar to this

const DataContext = createContext({ data: null });

const getData = (key) => {
    switch(key) {
        case 1:
            return "Hello"
        case 2:
            return " World"
        default:
            return null
    }
}

export const DataProvider = ({ id, children }) => {

  const data = useMemo(() => {
    return getData(id);
  }, [id]);

  return (
    <DataContext.Provider
      value={{
        data,
      }}
    >
      {children}
    </DataContext.Provider>
  );
};

export default DataContext

And child components that use it like this

const HelloComponent = () => {
    return <DataProvider id={1}>
        {
            // children are components that useContext(DataContext) and expect data to be "Hello"
        }
    </DataProvider>
}

Now I need to do this

const HelloWorldComponent = () => {
  return (
    <DataProvider id={1}>
      <DataProvider id={2}>
        {
          // children are components that need to read both Hello and World
        }
      </DataProvider>
    </DataProvider>
  );
};

Need to provide all parent context’s data of one single Context definition to a set of children

I know useContext can only read the closest parent of a given ContextType, so I’m not sure of how to proceed with this.

Answer

You can’t use two context providers of the same type and have children receive from both. The Context API is such that children components receive the context value from the closest context provider to them in the React tree.

You can, however, use a single provider that instead returns the getData function. Here’s an example using a single DataProvider and a custom React hook to provide the “id” value.

Data.Context.js

import { createContext, useContext } from "react";

const DataContext = createContext({
  getData: () => {}
});

const getData = (key) => {
  switch (key) {
    case 1:
      return "Hello";
    case 2:
      return " World";
    default:
      return null;
  }
};

export const useDataContext = (id) => useContext(DataContext).getData(id);

const DataProvider = ({ children }) => {
  return (
    <DataContext.Provider value={{ getData }}>{children}</DataContext.Provider>
  );
};

export default DataProvider;

index.js

<DataProvider>
  <App />
</DataProvider>

Child component

import { useDataContext } from "./Data.Context";

const Child = () => {
  const data1 = useDataContext(1);
  const data2 = useDataContext(2);

  return (
    <div>
      <div>DataProvider 1: {data1}</div>
      <div>DataProvider 2: {data2}</div>
    </div>
  )
}