React: TypeError: _useContext is undefined

Question

I'm trying my hand at TypeScript and React. I have a functional component (code below) that is supposed to consume a context with useContext, but it is showing me this weird error that I cannot find a solution to.

If I do not use TS, and go with JSX, it works just fine.

Edit: Screenshot>

Code:

AppProvider.tsx

import React, { useState, useEffect } from "react";

// Application's context (for general application-wide usage)
const AppContext: any = React.createContext(null);

// this will be used below in the componet we will export
export const AppContextProvider = AppContext.Provider;

export const AppProvider: React.FC = (props: any) => {
  const [appName, setAppName] = useState("Blood Donation");
  const [appUser, setAppUser]: any = useState(null);
  const [appInfoBusy, setAppInfoBusy] = useState(false); // working to get or set data

  useEffect(() => {
    getAppInfo();
  }, []);

  const getAppInfo = () => {
    setTimeout(() => {
      setAppName("Test");
      setAppUser({
        name: "Admin",
        email: "[email protected]",
        role_id: 100
      });
    }, 3000);
  };

  return (
    <AppContextProvider
      value={{
        appName: appName,
        appInfoBusy: appInfoBusy,
        appUser: appUser
      }}
    >
      {props.children}
    </AppContextProvider>
  );
};

Consumer: Login.tsx

import React, { useState, useEffect, useContext } from "react";
import {
  Button,
  Card,
  Elevation,
  FormGroup,
  InputGroup,
  Drawer,
  Classes,
  H4,
  Callout,
  H5
} from "@blueprintjs/core";
//@ts-ignore
import ReCAPTCHA from "react-google-recaptcha";

import logo from "../../assets/images/logo.png";
import "../../scss/Login.scss";
import { RecaptchaKey } from "../../shared/Info";
import { AppContextProvider } from "../../shared/context/AppProvider";

const Login: React.FC = props => {
  const [email, setEmail]: React.ComponentState = useState();
  const [password, setPassword]: any = useState();
  const [isOpen, setIsOpen]: any = useState();
  const [resetEmail, setResetEmail]: any = useState();
  const [emailSent, setEmailSent]: any = useState();
  const [captchaOk, setCaptchaOk]: any = useState(false);
  const [working, setWorking]: any = useState(false);

  // context
  const { appName, appUser, appInfoBusy } = useContext(AppContextProvider);

  /**
   * Handles lifecycle hooks
   */
  useEffect(() => {
    // when component is mounted
  }, []);

  /**
   * Handles Captcha change
   * @param value
   */
  const recaptchaChange = (value: any) => {
    setCaptchaOk(value ? true : false);
  };

  const handleRecoverySubmit = () => {
    setWorking(true);
    setTimeout(() => {
      setEmailSent(true);
      setWorking(false);
    }, 3000);
  };

  return (
    <div id="loginPage">
      ... removed for brevity ...
    </div>
  );
};

export default Login;

Any help is gratefully thanked. React and dependencies are all latest as of date.

Yousof K. · Accepted Answer · 2019-08-02 18:14:20Z

3

I was using the context provider instead of the context itself inside useContext(), I should have used useContext(AppContext) instead.

Commentary removed because stackoverflow.

edited Aug 2, 2019 at 18:14

answered Aug 2, 2019 at 13:03

Yousof K.

1,40414 silver badges23 bronze badges

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

Comments

pranav mishra · Accepted Answer · 2022-06-10 10:13:49Z

-1

The error is _useContext not defined. The issue is different than what it is actually referring to.

you created a context called as AppContext and then you export this as export const AppContextProvider = AppContext.Provider;

You have done correct till this stage.

The problem lies at consumer part i.e. login.tsx file.

you are importing a name file inside a curly braces which is not correct, because the context is exported as a name variable. You simply need to write

import  AppContextProvider  from "../../shared/context/AppProvider";

That's it, and when you are calling this context using useContext hooks, then the actual state that you are looking for get accessed and no issue will further persist.

Note: Don't use {} for importing named exports.

reference: When should I use curly braces for ES6 import?

answered Jun 10, 2022 at 10:13

pranav mishra

1391 silver badge5 bronze badges

1 Comment

charmingduchess Over a year ago

This answer is fundamentally incorrect. You must use curly braces for named imports, and not use them for default exports. See MDN: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

React: TypeError: _useContext is undefined

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related