React useContext return undefined?

Question

I have a problem with context, context api return to me undefined value.

Here is my code :

import { createContext } from "react";

const authContext = createContext();

export default authContext;

authContext.js

import React, { useReducer } from "react";
import authContext from "./authContext";
import authReducer from "./authReducer";

const authState = () => {
  const initState = {
    authValidte: false,
    authToken: null,
    authId: null,
  };
  const [state, dispatch] = useReducer(authReducer, initState);
  return (
    <authContext.Provider
      value={{
        authValidte: state.authValidte,
        authToken: state.authToken,
        authId: state.authId,
      }}
    >
      {props.children}
    </authContext.Provider>
  );
};

export default authState;

authState.js

Component who want to use context :

...
import authContext from "./context/auth/authContext";

function App() {
  const AuthContext = useContext(authContext);
  console.log(AuthContext); // undefined
...

How is app component rendered and how and where is authState rendered — Shubham Khatri
– Shubham Khatri, Commented May 16, 2020 at 13:00

Dennis Vash · Accepted Answer · 2020-05-16 13:09:03Z

1

First, note that custom component should be Uppercased (AuthState, AuthContext.Provider etc.).

For authContext to be available in App it must be a child of AuthContext.Provider. Read about Context in the docs.

<AuthState>
 <App/>
</AuthState>

answered May 16, 2020 at 13:09

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

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

Comments

Shubham Khatri · Accepted Answer · 2020-05-16 13:09:19Z

1

In order for your App Component to use context, you need to render the authState provider higher up in the hierarchy of App component

Ideally it should be the common parent of all the components that may need to use it.

Also note that your component names must start with upperCase characters index.js

import AuthState from '/path/to/authState.js'

export default () => (
   <AuthState>
      <App/>
   <AuthState>
)

answered May 16, 2020 at 13:09

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Collectives™ on Stack Overflow

React useContext return 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