react-simple-chatbot: Messages duplicate

Describe the bug Messages are doubled with each new trigger.

To Reproduce Steps to reproduce the behavior:

clean install the repo inside a fresh react app.
use the code example below.

Expected behavior messages should appear only once, as defined in the code. Instead, they appear multiple times (see screenshot)

Desktop (please complete the following information):

OS: Mac OS Monterey
Browser Latest Chrome, Safari

Bildschirmfoto 2022-06-28 um 15 51 27

Code

import "./App.css";
import ChatBot from "react-simple-chatbot";

function App() {
  const steps = [
    {
      id: "0",
      message: "Message 0",
      trigger: "1",
    },
    {
      id: "1",
      message: "Message 1",
      trigger: "2",
    },
    {
      id: "2",
      message: "Message 2",
      end: true,
    },
  ];

  return (
    <div className="App">
      <ChatBot steps={steps} />
    </div>
  );
}

export default App;

About this issue

Original URL
State: open
Created 2 years ago
Comments: 16

Most upvoted comments

I’ve investigated more an found the difference that made it work for me. Before I used:

import ReactDOM from "react-dom/client";
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

which produced the error, switching it to

import { render } from "react-dom";
render(<App />, document.getElementById("root"));

made it work. Hope that helps.

+32

Esshahn on Jul 7, 2022

Platform: - Next.js File:- next.config.js

#Issue Solve… Solution:- Change reactStrictMode value TRUE to FALSE

======= Code =======

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  swcMinify: true,
};

module.exports = nextConfig;

Darpan-favfly on Jul 25, 2022

I’ve investigated more an found the difference that made it work for me. Before I used:
import ReactDOM from "react-dom/client";
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)
which produced the error, switching it to
import { render } from "react-dom";
render(<App />, document.getElementById("root"));
made it work. Hope that helps.

It worked for me too

sajid1545 on Apr 2, 2023

i got the same issue [ { id: ‘1’, message: ‘Welcome to InfoPRO’, trigger: ‘2’ }, { id: ‘2’, message: ‘Hi! Guest. Thanks for your interest. In case we get disconnected, Please provide your email address formore’, trigger: ‘Checkemail’ }, { id: ‘Checkemail’, user: true, validator: (value) => { if (!value.match(/^[\w-]+(.[\w-]+)*@([\w-]+.)+[a-zA-Z]{2,7}$/)) { return ‘Please provide a valid email address.’; } return true; }, trigger: ‘mailthanks’, }, { id: ‘mailthanks’, message: 'Thanks! ', trigger: ‘option’, }, { id: ‘option’, message: ‘Choose the Options’, end: true }, ]

SaleemMalik632 on Aug 15, 2023

I’ve investigated more an found the difference that made it work for me. Before I used:
import ReactDOM from "react-dom/client";
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)
which produced the error, switching it to
import { render } from "react-dom";
render(<App />, document.getElementById("root"));
made it work. Hope that helps.

This worked for me thanks!!!

Eduardo-Miguel on Nov 26, 2022

With react 18 strict mode enable useEffect to run twice in development, that’s why this library might be bugged

ScreamZ on Oct 31, 2022