Context Api is returning undefined

Question

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;

Is the <AuthContextProvider> farther up the component tree than <App>? — Nicholas Tower
– Nicholas Tower, Commented Oct 8, 2022 at 5:07

Fozzle · Accepted Answer · 2022-10-08 05:13:01Z

1

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

answered Oct 8, 2022 at 5:13

Fozzle

6031 gold badge7 silver badges19 bronze badges

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

Comments

Arifur Rahaman · Accepted Answer · 2022-10-08 05:43:03Z

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;

Collectives™ on Stack Overflow

Context Api is returning undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related