React, getting undefined as result while using useContext

Question

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;

Youssouf Oumar · Accepted Answer · 2022-05-18 06:07:24Z

1

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

edited May 18, 2022 at 6:07

answered May 17, 2022 at 18:31

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React, getting undefined as result while using useContext

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related