- I have two function component (component1) and it’s a main component and (component2) which i want to grap state data from it
import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom/client";
const TestContext = createContext();
function Component1() {
const test = useContext(TestContext);
return (
<h1>{`${test}`}</h1>
);
}
function Component2() {
const [test, setTest] = useState("From Component 3");
return (
<TestContext.Provider value={test}>
<Component1 />
</TestContext.Provider>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Component1 />);
In this question:
- I want to use only useContext Hook to bring state
- I want Component1 is the rendered component.
I try a lot but always the result is “undefined“