5

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.

graren
  • 158
  • 1
  • 10

1 Answers1

5

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>
  )
}

Edit react-how-to-use-multiple-contexts-of-the-same-type-while-allowing-children-to

enter image description here

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
  • This is pretty clever, of course the context I'm trying to simulate is a bit more complex than the sample I provided but this could actually be a solution, thanks – graren Aug 03 '21 at 20:55
  • I used a small variation of this by returning via the hook the functions from the context I needed, had to make some refactoring magic but it worked. Answer accepted! – graren Aug 04 '21 at 15:35
  • @graren Awesome, glad to help and hear it works for you! Cheers. – Drew Reese Aug 04 '21 at 15:36
  • 1
    What is the purpose of having `getData: () => {}` within `createContext` ? I removed it and it works too.. ? – gordie Feb 21 '22 at 10:59
  • 1
    @gordie That is a [default context value](https://reactjs.org/docs/context.html#reactcreatecontext), used if you attempt to access the context value ***outside*** a context provider. It's not required, but makes working with the code easier sometimes. – Drew Reese Feb 23 '22 at 19:21