Closed wandanli closed 3 years ago
solution:
<MyContext.Provider
value={{ value: [value, setValue], value2: [value2, setValue2] }}
>
{props.children}
</MyContext.Provider>;
const App = () => {
return (
<div>
<MyProvider>
<ComponentA />
</MyProvider>
</div>
);
};
const MyContext = React.createContext();
const MyProvider = props => {
const [value, setValue] = React.useState("foo");
const [value2, setValue2] = React.useState("goo");
return (
<MyContext.Provider
value={{ value: [value, setValue], value2: [value2, setValue2] }}
>
{props.children}
</MyContext.Provider>
);
};
const ComponentA = () => {
const { value, value2 } = React.useContext(MyContext);
const [stateValue, setStateValue] = value;
const [stateValue2, setStateValue2] = value2;
return (
<div>
<h1>The value is: {stateValue}</h1>
<h1>The value2 is: {stateValue2}</h1>
</div>
);
};
ReactDOM.render(<App />, document.getElementById("app"));
How to pass multiple values using react context API