title: React: TypeError: _useContext is undefined
body: <p>I'm trying my hand at TypeScript and React. I have a functional component (code below) that is supposed to consume a context with <code>useContext</code>, but it is showing me this weird error that I cannot find a solution to.</p>
  
  <p>If I do not use TS, and go with JSX, it works just fine.</p>
  
  <p>Edit: Screenshot>
  <a href="https://i.stack.imgur.com/TR6qr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TR6qr.png" alt="enter image description here"></a></p>
  
  <p>Code:</p>
  
  <p><em>AppProvider.tsx</em></p>
  
  <pre><code>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) =&gt; {
    const [appName, setAppName] = useState("Blood Donation");
    const [appUser, setAppUser]: any = useState(null);
    const [appInfoBusy, setAppInfoBusy] = useState(false); // working to get or set data
  
    useEffect(() =&gt; {
      getAppInfo();
    }, []);
  
    const getAppInfo = () =&gt; {
      setTimeout(() =&gt; {
        setAppName("Test");
        setAppUser({
          name: "Admin",
          email: "test@test.com",
          role_id: 100
        });
      }, 3000);
    };
  
    return (
      &lt;AppContextProvider
        value={{
          appName: appName,
          appInfoBusy: appInfoBusy,
          appUser: appUser
        }}
      &gt;
        {props.children}
      &lt;/AppContextProvider&gt;
    );
  };
  
  </code></pre>
  
  <p><em>Consumer: Login.tsx</em></p>
  
  <pre><code>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 =&gt; {
    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(() =&gt; {
      // when component is mounted
    }, []);
  
    /**
     * Handles Captcha change
     * @param value
     */
    const recaptchaChange = (value: any) =&gt; {
      setCaptchaOk(value ? true : false);
    };
  
    const handleRecoverySubmit = () =&gt; {
      setWorking(true);
      setTimeout(() =&gt; {
        setEmailSent(true);
        setWorking(false);
      }, 3000);
    };
  
    return (
      &lt;div id="loginPage"&gt;
        ... removed for brevity ...
      &lt;/div&gt;
    );
  };
  
  export default Login;
  
  </code></pre>
  
  <p>Any help is gratefully thanked. React and dependencies are all latest as of date.</p>