Context Api is returning undefined-CodePudding

Here I have declared a basic prototype for my context store and when I try to use this store it is returning undefined even though I double checked the syntax so someone can please help why its returning undefined:

Store:

import { createContext } from "react";

const AuthContext = createContext("Default");

export const AuthContextProvider = (props) => {
  const loginHandler = () => {
    console.log("Login Handler");
  };
  const logoutHandler = () => {
    console.log("Logout Handler");
  };

  const contextValue = {
    token: "false",
    loging: loginHandler,
    logout: logoutHandler,
  };

  return (
    <AuthContext.Provider value={contextValue}>
      {props.children}
    </AuthContext.Provider>
  );
};

export default AuthContext;

App:

import { useContext } from "react";
import Main from "./components/Main";
import "./App.css";
import { Provider } from "react-redux";
import store from "./store/DataStore";
import AuthContext from "./store/AuthStore";

const App = () => {
  const ctx = useContext(AuthContext);
  return (
    <Provider store={store}>
      {console.log(ctx.token)}
      <Main />
    </Provider>
  );
};

export default App;

CodePudding user response：

1.) Your default value for the context is the string "Default" (https://reactjs.org/docs/context.html#reactcreatecontext)

2.) You are reading the context before using the provider you defined, so you are never setting the context value to your object. (see second paragraph of https://reactjs.org/docs/context.html#reactcreatecontext)

The result is you are reading the token property off the string "Default"...which would be undefined. Linked is an example using your provider and how it changes context in components further down the tree. https://playcode.io/980421

CodePudding user response：

Wrap your App component by the AuthContextProvider component.

index.js

root.render(
  <StrictMode>
    <AuthContextProvider>
      <App />
    </AuthContextProvider>
  </StrictMode>
);

App.js

import { useContext } from "react";
import AuthContext from "./store/authStore";

const App = () => {
  const ctx = useContext(AuthContext);
  return (
    <div>
      {console.log(ctx.token)}
      <p>Hello</p>
      {console.log(ctx)}
    </div>
  );
};

export default App;

authStore.js

import { createContext } from "react";

const AuthContext = createContext("Default");

export const AuthContextProvider = (props) => {
  const loginHandler = () => {
    console.log("Login Handler");
  };
  const logoutHandler = () => {
    console.log("Logout Handler");
  };

  const contextValue = {
    token: "false",
    loging: loginHandler,
    logout: logoutHandler,
  };

  return (
    <AuthContext.Provider value={contextValue}>
      {props.children}
    </AuthContext.Provider>
  );
};

export default AuthContext;