Messages duplicate

[Esshahn]

Describe the bug
Messages are doubled with each new trigger.

To Reproduce
Steps to reproduce the behavior:

1. clean install the repo inside a fresh react app.
2. 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

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;

[krownsh]

I got the same problem...

[Esshahn]

I found out that it's related with create react app, but I don't know why. I switched to Vite and it worked then.

[Esshahn]

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.

[Darpan-favfly]

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;

[ScreamZ]

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

[Eduardo-Miguel]

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!!!

[hamid-yg]

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 works for me as well. Thanks

[IbrahimLakhzine]

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 too thanks for the help.

[Birtija]

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 did it for me!

[sajid1545]

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

[SaleemMalik632]

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
},
]

[bharghu]

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;

yes its work fine, thanks to resolve this doubling issue - see the example of implementation - https://shitalacademy.com

[EliusCaleb]

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,
  swcMinifs y: true,
};

module.exports = nextConfig;

yes its work fine, thanks to resolve this doubling issue - see the example of implementation - https://shitalacademy.com

how to you style this component

[bharghu]

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,
  swcMinifs y: true,
};

module.exports = nextConfig;

yes its work fine, thanks to resolve this doubling issue - see the example of implementation - https://shitalacademy.com

how to you style this component

define -> const theme in top and use theme in "themeprovider"

[EliusCaleb]

Thanks Noted

[thachsteven]

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;

Thanks for your helping !