Question 246196 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – problem in react-chatbot-kit as actions is not transfering the function

I was using react-chatbot-kit in which I am facing an error on click of button (got it). It was done with help of action provider, which technically is using redux to transfer the function to perform the action. But when I was clicking on the got it button, it ends up giving error ‘initialAction not defined’.

 import React from 'react';
 
 const ActionProvider = ({ createChatBotMessage, setState, children }) => {
 
     const initialAction = () => {
         const message = createChatBotMessage('Just type in your name to begin.');
         
         setState((prev) => ({
             ...prev,
             messages: [...prev.messages, message]
         }))
     }
 
     const updateState = (message, checker) => {
         setState((prev) => ({
             ...prev,
             messages: [...prev.messages, message],
             checker,
          }))
     }
 
 
     return (
         <div>
             {React.Children.map(children, (child) => {
                 return React.cloneElement(child, {
                     actions: {
                         initialAction,
                     },
                 });
             })}
         </div>
     );
 };
 
 
 export default ActionProvider;

and gotitbtn.js

 import React from "react";
 import "./gotitbtn.css";
 
 export default function Gotitbtn(props) {
     const initialAction = () => {
         props.actions.initialAction()
      };
 
      
     return (
         <div className="gt_btn_main">
             <button className="gt_btn_button" onClick={() => initialAction()}>
                 Got it!
             </button>
         </div>
     );
 }

and config.js for loading the button widget

 // Config starter code

 import { createChatBotMessage } from "react-chatbot-kit";
 import "./config.css";
 import BotAvatar from "./BotAvatar";
 import Gotitbtn from "./Gotitbtn";
 
 
 const config = {
     initialMessages: [
         createChatBotMessage(`Hello, Welcome to student info system!`, {
             widget: "gotitbtn",
         }),
     ],
     botName: "HappilyEver",
     
     customStyles: {
         botMessageBox: {
             backgroundColor: "#e8e7e7",
         },
 
         userMessageBox: {
             backgroundColor: "#i1i1i1",
         },
 
         chatButton: {
             backgroundColor: "#5ccc9d",
         },
     },
 
     customComponents: {
         botAvatar: (props) => <BotAvatar />,
     },
     
 
     widgets: [
         {
             widgetName: "gotitbtn",
             widgetFunc: (props) => <Gotitbtn {...props} />,
         },
     ],
 };
 
 export default config;

I was trying to make a chatbot but it is giving me an error. Please help me. Error is: initialAction is not a defined function

exact error is Cannot read properties of undefined (reading 'initialAction') TypeError: Cannot read properties of undefined (reading 'initialAction') at initialAction (http://localhost:3000/main.7ae6d4e6e2d0bf5a823e.hot-update.js:27:26) at onClick (http://localhost:3000/main.7ae6d4e6e2d0bf5a823e.hot-update.js:33:22) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:12200:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:12244:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:12301:35) at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/bundle.js:12315:29) at executeDispatch (http://localhost:3000/static/js/bundle.js:16459:7) at processDispatchQueueItemsInOrder (http://localhost:3000/static/js/bundle.js:16485:11) at processDispatchQueue (http://localhost:3000/static/js/bundle.js:16496:9) at dispatchEventsForPlugins (http://localhost:3000/static/js/bundle.js:16505

Tags:

2

Answers


  1. 0

    Change this code in gotitbtn.js

     const initialAction = () => {
     props.actions.initialAction()
  };

    to this

    const initialAction = () => {
         props.actionProvider.initialAction()
      };
    Login or Signup to reply.
  2. 0

    this is happening since you are passing empty object in the actions props of the message parser.

    The code below can be found in MessageParser.jsx

    {React.Children.map(children, (child) => {
    return React.cloneElement(child, {
      parse: parse,
      actions: {},//empty
    });
  })}

    Change it into

    {React.Children.map(children, (child) => {
    return React.cloneElement(child, {
      parse: parse,
      actions,
    });
  })}

    Now you can run your code again. I hope it solves your issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search