undefined is not an object (evaluating 'props.configProps.questions')

[atishwarchand]

Hello @FredrikOseberg

Followed all the steps in your Youtube video: https://youtu.be/vTpk-PKZwTs?list=PL_kr51suci7UQAxHOF2GitkM5WrOBPcpf

But I am getting this error for what reasons idk.

Can you help me with this please..

Quiz.js

import React, { useState } from 'react';

import FlashCard from '/Users/atishwar/Desktop/bkp/poms_ui_template copy/src/components/Quiz/FlashCard.js';

const Quiz = (props) => {
    let [questionIndex, setQuestionIndex] = useState(0);

    const incrementIndex = () =>
        setQuestionIndex((prev) => (prev.questionIndex += 1));

    const currentQuestion = props.configProps.questions[questionIndex];

    if (!currentQuestion){
        return <p>Quiz Over</p>;
    }

    return (
        <FlashCard
            question={currentQuestion.question}
            answer={currentQuestion.answer}
            incrementIndex={incrementIndex}
        />
    );
};

export default Quiz;

config.js

import React from 'react';
import { createChatBotMessage } from "react-chatbot-kit";
import Options from 'components/Options/Options';
import Quiz from 'components/Quiz/Quiz';
import BotAvator from '@material-ui/icons/SupervisedUserCircle';

const config = {
    botName: "Sara",
    initialMessages: [createChatBotMessage('Bula',{
        widget: "options",
    }),],
    customComponents: {
        botAvator: (props) => <BotAvator {...props} />
    },
    widgets:[
        {
            widgetName: 'options',
            widgetFunc: (props) => <Options {...props} />,
        },
        {
            widgetName: 'JavascriptQuiz',
            widgetFunc: (props) => <Quiz {...props}/>,
            props: {
                questions:[
                            {
                                question: "q",
                                answer: "a",
                                id: 1,
                            },
                            {
                                question: "q",
                                answer: "a",
                                id: 2,
                            },
                            {
                                question: "q",
                                answer: "a",
                                id: 3,
                            },
                ]
        },
        },
    ],
};

export default config;

option.js

import React from 'react';

//import './Options.css'

const Options = (props) =>{
const options = [
            {
                text: "Javascript",
                handler: props.actionProvider.handleJavascriptQuiz,
                id:1,
            },
            {
                text: "Timeline of Events",
                handler: () => {},
                id:2,
            },
            {
                text: "Editing",
                handler: () => {},
                id:3,
            },
        ];

    const buttonMarkup = options.map((option) => (
        <button key={option.id} onClick={option.handler} className='option-button'>
            {option.text}
        </button>
    ));

    return <div className='options-container'>{buttonMarkup}</div>;
};

export default Options;

MessageParser.js

class MessageParser {
    constructor(actionProvider, state) {
      this.actionProvider = actionProvider;
      this.state = state;
    }

    parse(message) {
      console.log(message)
      const lowercase = message.toLowerCase()

      if (lowercase.includes("hello") || lowercase.includes('hi')){
          this.actionProvider.greet();
      }

      if (lowercase.includes('Javascript') || lowercase.includes('js')){
          this.actionProvider.handleJavascriptQuiz();
      }

    }
  }

  export default MessageParser;

ActionProvider.js

class ActionProvider {
    constructor(createChatBotMessage, setStateFunc, createClientMessage) {
      this.createChatBotMessage = createChatBotMessage;
      this.setState = setStateFunc;
      this.createClientMessage = createClientMessage;
    }
    //create a fuction method
    greet = () => {
        const message = this.createChatBotMessage("Hello " +localStorage.getItem('first_name'));
        this.addMessageToState(message);
    };

    handleJavascriptQuiz = () => {
        const message = this.createChatBotMessage('Good Luck!',
        {
            widget: "JavascriptQuiz",
        }
        );
        this.addMessageToState(message);
    };

    addMessageToState = (message) => {
        this.setState((prevState) => ({
            ...prevState,
            messages: [...prevState.messages, message],

        }));
    };

  }

  export default ActionProvider;

Also requesting if you could share the css file for options.css which you used in the same video tutorial would be appreciated.

[FredrikOseberg]

Try:

props.questions[questionIndex] 

You can find an options css file example here: https://github.com/FredrikOseberg/react-chatbot-kit-docs/blob/master/src/bots/skybot/widgets/Options/Options.css

[atishwarchand]

@FredrikOseberg bro thanks so much for the quick response.

It worked, but when i click on next question, i get this error..

Plus any hints on how can i have this floating button on my project... please

[FredrikOseberg]

    let [questionIndex, setQuestionIndex] = useState(0);

    const incrementIndex = () =>
        setQuestionIndex((prev) => (prev.questionIndex += 1));

You're trying to access prev.questionIndex, which will fail because prev is not an object. It's a number. Do this instead:

const incrementIndex = () =>
        setQuestionIndex((prev) => (prev += 1));

The button is just a button that's fixed with CSS to be in that position. That site is open source, you can find the code for that here and see how I did it: https://github.com/FredrikOseberg/react-chatbot-kit-docs

[atishwarchand]

@FredrikOseberg thanks so much, love the Chatbot.

Final Help would be really appreciated, is it possible to make the chatbot to redirect a user to some pages... example when user types "help", the bot should give a message redirecting and redirect to help page on the site.

In this same project would like to implement this feature... help would be appreciated

[FredrikOseberg]

Yes you can. You can for instance push to history in a widget or the actionprovider. If you are using react router you can use useHistory hook to get access to it.