I'm trying to get state and setState from the Store file but I get undefined. What's happening, and how do fix it?
import React, {createContext, useState} from 'react'
import Header from './Header'
export const Data = createContext()
function Store() {
const [state, setState] = useState(false)
const value = {state, setState}
return (
<Data.Provider value={value}>
<Header/>
</Data.Provider>
)
}
export default Store
import React, { useContext} from "react";
import { Data } from "./Store";
function Header() {
const Store = useContext(Data)
console.log(Store) // I get undefined
return (
<div>
</div>
);
}
export default Header;
You are creating Store, but never calling it, that's the problem. Wrap App component inside Store and it would work. Working example of your link here.
index.js:
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import Store from "./store";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<Store>
<App />
</Store>
</StrictMode>
);