0
166
ViewsReact: 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.
1 answers
Answer question0
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>
)
}
