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?

Thank you so much!

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

I had the same issue. Maybe this will help you.

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