React: 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!