chatbotConfig.js

import React from "react";
import { createChatBotMessage } from "react-chatbot-kit";

import Overview from "../components/widgets/Overview/Overview";
import MessageParser from "../components/widgets/MessageParser/MessageParser";
import ActionProviderDocs from "../components/widgets/ActionProvider/ActionProviderDocs";

const botName = "DocsBot";

const config = {
  botName: botName,
  lang: "no",
  customStyles: {
    botMessageBox: {
      backgroundColor: "#376B7E",
    },
    chatButton: {
      backgroundColor: "#5ccc9d",
    },
  },
  initialMessages: [
    createChatBotMessage(
      `Hi I'm ${botName}. I’m here to help you explain how I work.`
    ),
    createChatBotMessage(
      "Here's a quick overview over what I need to function. ask me about the different parts to dive deeper.",
      {
        withAvatar: false,
        delay: 500,
        widget: "overview",
      }
    ),
  ],
  state: {
    gist: "",
  },
  customComponents: {},
  widgets: [
    {
      widgetName: "overview",
      widgetFunc: (props) => <Overview {...props} />,
      mapStateToProps: ["gist"],
    },
    {
      widgetName: "messageParser",
      widgetFunc: (props) => <MessageParser {...props} />,
      mapStateToProps: ["gist"],
    },
    {
      widgetName: "actionProviderDocs",
      widgetFunc: (props) => <ActionProviderDocs {...props} />,
      mapStateToProps: ["gist"],
    },
  ],
};

export default config;

Here i'm trying to put the response data in to state, But first it showing an empty array after the array of data is showing

i want to show that question data in messageParser file, what im doing wrong here please help me

       import React, { useState, useEffect } from "react";
       import Chatbot from "react-chatbot-kit";
       import axios from 'axios';
       import { createChatBotMessage } from "react-chatbot-kit";

       import MessageParser from "./MessageParser";
       import ActionProvider from "./ActionProvider";

       function App() {
        const [getQuestion, setQuestion] = useState([]);

         useEffect(() => {
          axios
         .get("**********************")
         .then(response => {
          setQuestion(response.data.question)
        })
       }
     ,[])

  const getConfig = () => {

   var state = {
     gist: "",
    questionIndex: 0,
   questions:getQuestion
  }

return {
  botName: "Docstime - Bot",
  lang: "no",
  customStyles: {
    botMessageBox: {
      backgroundColor: "#376B7E",
    },
    chatButton: {
      backgroundColor: "#5ccc9d",
    },
  },
  initialMessages: [
    createChatBotMessage(
      `Hi I'm Docstime - Bot. I’m here to help you with self-assesment.`
    )],
  state: state,
  customComponents: {
    header: () => <div style={{
      backgroundColor: '#0097f6', color: 'white', padding: '12.5px', borderTopRightRadius: "5px",
      borderTopLeftRadius: '5px'
    }}>Self Assesment</div>
   },
 }
}
  return (
      <div className="App">
       <Chatbot
         config={getConfig()}
         messageParser={MessageParser}
         actionProvider={ActionProvider}
         placeholderText="Customer Message Here"
       />
    </div>
     );
 }

 export default App;

this is messageParser file this.state is getting empty data

        class MessageParser {
          constructor(actionProvider, state) {
             this.actionProvider = actionProvider;
             this.state = state
           }
        parse = (message) => {
          console.log('current message' + message);
          console.log(this.state);
        }
      export default MessageParser;

Hello, thank you for the work.

My question is How can I plz use the header of the customComponents in another component in my app.

I want to use it for a component unmount (So when i click on the header the chatbot is reduced ) .

Thanks.