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);

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')
);

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";

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("");

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;

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")
);