React Use Context. Cannot destructure property 'currentChatbotInEdit' of 'Object(...)(...)' as it is undefined. How can I fix that?

Question

I try to import the chatbotcontext in order to get access to current chatbot in edit, but something went wrong. Do you have ideas what could be the issue here?

Here is the error message:

Here is an excerpt of my chatstate.js:

    // import packages
    import React, { useReducer, useContext } from "react";
    import axios from "axios";
    
    // import local dependencies
    import AuthContext from "../../Context/Auth/authContext";
    import ChatbotContext from "../../Context/Chatbot/chatbotContext";
    import chatReducer from "./chatReducer";
    import ChatContext from "./chatContext";
    import { ADD_INPUT_TO_CHAT, SESSION_ID_CREATED } from "./chatTypes";
    
    const ChatState = props => {
      // get access to auth token
      const authContext = useContext(AuthContext);
      const { token } = authContext;
    
      // get access to current chatbot in edit
      const chatbotContext = useContext(ChatbotContext);
      const { currentChatbotInEdit } = chatbotContext;

And here is an excerpt of my ChatbotState.js:

// import packages
import React, { useReducer, useContext } from 'react';
import axios from 'axios';

// import local dependencies
import AuthContext from '../Auth/authContext';
import ChatbotContext from './chatbotContext';
import chatbotReducer from './chatbotReducer';
import {
  SUCCESSFUL_CHATBOT_FROM_USER_FETCH,
  NEW_QUIZBOT_CREATED
} from './chatbotTypes';

const ChatbotState = props => {
  // 1 - Get access to auth token
  const authContext = useContext(AuthContext);
  const { token } = authContext;

  // 2 - Create initial chatbot state
  const initialChatbotState = {
    userChatbots: [],
    currentChatbotInEdit: null
  };

  // 3 - Get access to the state object and the dispatch function
  const [state, dispatch] = useReducer(chatbotReducer, initialChatbotState);

Prosperus

this is what my console is telling me: ChatState.js:19 Uncaught TypeError: Cannot destructure property 'currentChatbotInEdit' of 'chatbotContext' as it is undefined. at ChatState (ChatState.js:19) at renderWithHooks (react-dom.development.js:14825) at mountIndeterminateComponent (react-dom.development.js:17505) at beginWork (react-dom.development.js:18629) at HTMLUnknownElement.callCallback (react-dom.development.js:188) at Object.invokeGuardedCallbackDev (react-dom.development.js:237) at invokeGuardedCallback (react-dom.development.js:292) – Prosperus

Answer 1

You probably did not serve your context provider (as in AuthContextProvider in your case, if you had any) to your root component, i mean your app.js or index.js depending on the numbers of components you intend to serve

Say you are serving all your components then you can use your index.js, something like what i have below;

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import AuthContextProvider from './context/AuthContext';

ReactDOM.render(
  <React.StrictMode>
   <AuthContextProvider>
     <App />
   </AuthContextProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Isolating

It's working I had the same issue and fixed using the above method. Thank you! – Italianate

Answer 2

Inside my ContextFile I had:

...
export const AuthContext = createContext();
...
export default AuthContextProvider;

And in the file that I was consuming the context, I did this:

import AuthContext from "./context/AuthContext";

So, I was not importing "AuthContext", but the default "AuthContextProvider" instead.

Try to put {} in this line:

import { ChatbotContext } from "../../Context/Chatbot/chatbotContext";

Scalenus

That was exactly my problem. Always make sure you are exporting the context not its provider. In my case my Authcontext file a named export AuthContext and a default export AuthContextProvider. Then I needed the AuthContext in one file but imported it without {} i had the same error as the context was reported as undefined. Without the {} it is logically the AuthContextProvider I was importing and renaming AuthContext – Distinctly

Thank u, it's a silly mistake for me, but your solution is working for me. It's taken almost 2 days ............. – Mirage

Answer 3

I had the same problem. When I created the context, I did not give any default value, which is not a must, but that was what created the problem. If I pass null or undefined the problem is still there.

What solves it is to pass an empty value, like so:

const MyContext = createContext("");

Loralorain

Answer 4

In my App.jsx file, I just had to wrap the ContextProvider tag within the other components that needed some global state. Something like:

App.jsx

import { ContextProvider } from './context/Context';

function App() {
  return (
    <ContextProvider>
      <MyComponent> {/* This component uses the Context states */}
    </ContextProvider>
  );
}

MyComponent.jsx

import Context from './context/Context';
import { useContext } from 'react';

function MyComponent() {
  const { firstName, lastName } = useContext(Context);
  return (
    <div>
      <h1>{firstName} {lastName}</h1>
    </div>
  );
}

Context.js

import { useState, createContext } from 'react';

const Context = createContext();

export function ContextProvider(props) {
  const [firstName, setFirstName] = useState('Rick');
  const [lastName, setLastName] = useState('Astley');

  return (
    <Context.Provider value={{ firstName, lastName }}>
      {props.children}
    </Context.Provider>
  );
}

export default Context;

Lole

Answer 5

I had the same issue and I solve it importing the provider at index.js level

ReactDOM.render(
  <React.StrictMode>
    <AppContextProvider providerInitState={movie}>
      <App />
    </AppContextProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Robinson

Answer 6

I has the same problem . You maybe not add your context provider to the index.js page

Add this, to the index.js page

 <AppContextProvider providerInitState={movie}>
      <App />
    </AppContextProvider>

Lavena