Help please. TypeError: _ useContext is undefined. No idea why.

[ccapua]

Do you want to request a feature or report a bug?

not sure.

What is the current behavior? am getting the error "TypeError: _ useContext is undefined". I have it imported and everything set up properly (I think?). please see below.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

I am trying to have an app context for the entire app. Here is the code where useContext is called:

import React, { useState, useContext } from 'react';
import { AppContext } from '../contexts/AppContext';

const Burger = (props) => {
  const [clicked, setClicked] = useState(false);

  const { toggleClicked } = useContext(AppContext);

  return ( 
    <div id="burger" data-state="burger" onClick={toggleClicked()}>
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
  );
}

export default Burger;

and here is the context file:

import React, { useState, createContext } from 'react';

export const AppContext = createContext();

const AppContextProvider = (props) => {
  const [burgerClicked, setBurgerClicked] = useState(false);

  const toggleClicked = () => {
    setBurgerClicked(true);
    let overlay = document.getElementsByClassName('overlay');
    if (overlay.dataset.state = 'on') {
      overlay.dataset.state = 'off'
    } else {
      overlay.dataset.state = 'on';
    }
  }

  return (
    <AppContext.Provider value={{toggleClicked, burgerClicked}}>
      {props.children}
    </AppContext.Provider>
  )
}

export default AppContextProvider;

What is the expected behavior?

useContext is defined and allows me to access context variables.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

This is the latest version of React and Firefox. The version of React is 16.8.6. It is installed both globally and in the local directory. Any help is very much appreciated. The suggestions I've gotten so far are that I'm importing it wrong or I'm using the wrong version, which I'm fairly certain are both not true. This is happening in two different projects and I can't really get any work done until I can sort it :(

[universse]

Can you show App.js (or anything similar) where you wrap the app with AppContextProvider?

[ccapua]

I had forgotten to wrap the app with AppContextProvider, however, this is still happening in another app I'm working on, and I have wrapped the app in the ContextProvider.

here's the other app.js :

import React, { useContext } from 'react';

import LandingPage from './landing_page/LandingPage.js';
import Dashboard from './dashboard/Dashboard.js';
import Header from './header/Header.js';
import AppContextProvider, { AppContext } from './contexts/AppContext.js';
import './App.css';

export default function App() {
  const { loggedIn } = useContext(AppContext);

  //page display:
  const displayPage = function() {
    if (loggedIn) {
      return <Dashboard/>
    } else {
      return <LandingPage/>
    }
  };

  //render:
  return (
    <AppContextProvider>
      <Header />>
      {displayPage()}
    </AppContextProvider>
  );

the context file itself:

import React, { createContext, useState, useEffect } from 'react';
import SocketIOClient from 'socket.io-client';

export const AppContext = createContext();

const AppContextProvider = (props) => {
 . . . . . . . . . . . . . . 
 //render:
  return ( 
    < AppContext.Provider value={{ user, loggedIn, login, logout, failToAdd, socket, notifications, noOfNotifications, sendNotification }}>
      {props.children}
    </AppContext.Provider>
   );
}

export default AppContextProvider;

and a component where it is called:

import React, { useState, useEffect, useContext } from 'react';
import NotificationCard from './NotificationCard.js';
import './Notifications.css';
import { AppContext } from '../../contexts/AppContext.js';

export default function Notifications() {
  //context:
  const { user, noOfNotifications, notifications, getNotifications } = useContext(AppContext);

 . . . . . . . . . . . . . . . . . . . . . ..  .. . 

  //render:
  return (
    <li>
      <button
        id="notification-button"
        className="cyan darken-1 white-text"
        onClick={handleClick.bind(this)}
      > <i className="material-icons">notifications</i>
      </button>
      <div id="notification-badge">
        {noOfNotifications}
      </div>
      <ul id="notifications-list">
        {displayList()}
      </ul>
    </li>
  );
}

[universse]

Hi. For your App component, you can't use useContext(AppContext) there since App is not children of AppContextProvider.

[ccapua]

Ohh, I see it. Thanks for that!

[shivam2093]

Please help me I have an error shown unndefined is not an object( '_useContext.user')

[shivam2093]

I have used perfect import files but I use useContext in App.js file would be fine?

[Salimbek21]

Hi Every one Please help me!

[Salimbek21]

[universse]

Can you show the LanguageContext.Provider component where you pass in value?

[RajasekharYekula]

[Salimbek21]

You need to import useContext from packages

On Thu, 12 Jan 2023 at 16:15, Rajasekhar.Yekula @.***> wrote:

[image: image] https://user-images.githubusercontent.com/65954758/212042267-6cb3c14e-2491-40ea-a761-67e375fb0675.png

— Reply to this email directly, view it on GitHub https://github.com/facebook/react/issues/16225#issuecomment-1380175357, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATV6GHS34ERHSJP23KCJURTWR7RV5ANCNFSM4IHFSNFQ . You are receiving this because you commented.Message ID: @.***>

[Cnerd-Mahadi]

Okay IDK if thats gonna be helpful for you or not. Apparently the place you put your ContextProvider and the place you use your useContext cannot be same. It has to be a child of your ContextProvider.

For example, in your app you have used the useContext in the same place where you called your ContextProvider(AppContextProvider). I guess thats the issue atleast it was for me.

[VINAYAKB97]

Guys please help with this error.. I not getting why this error appearing. If any one has a solution for this please guide me.

[pwbriggs]

Hey there @VINAYAKB97! 👋

Unfortunately, this issue tracker is for reproducible bugs in the React library itself, not for help with fixing a bug in your app. If you're looking for support, a good place to ask would be Stack Overflow (see the "Community" page on react.dev). Try searching the existing questions related to React, and if you can't find anything helpful, ask your own.

Just a heads up, the people over at Stack Overflow will want you to provide a minimal, reproducible example showing your error.

Hope this helps! 😄