twice loaded same time

Hello

I use this component fkhadra/react-toastify, twice loaded for me same time, i want only once loaded other thing is correct and i dont have wrong or error on code writting , What is your solution ?

notify({type,text}){ toast(text, { position: "top-center", autoClose: 5000, hideProgressBar: false, closeOnClick: true, pauseOnHover: true, draggable: true, type: type }); }

Thanks

[fkhadra]

Keep the toast import in your component as follow:

import { toast } from 'react-toastify';
// omit the ToastContainer and the css

Then at the root of your app:

import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const App = () => (
  <div>
    <YourComponent />
    <ToastContainer />
  </div>
)

[areeburrub]

Hey @heshamelmasry77,

The toast function is probably called twice. You can provide a unique toastId to prevent duplicate. You can find how to here

This solution works

Yeah this solution works, just add a custom id and the toast won’t repeat

you may be using two type of Toasts Static and dynamic

For Static Toast

Simply add random text like this:

toast("Just a Toast", {toastId: "unique-random-text-xAu9C9-"});

For Dynamic Toast :

Dynamic toasts is used for notification or error logging so you can generate random unique id using this fumction:

//  Make ID function, I use this to create random ID
// credit : https://stackoverflow.com/questions/1349404/generate-random-string-characters-in-javascript
const makeid = (length) => {
var result = '';
var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for ( var i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() * 
charactersLength));
}
return result;
}

toast("Just a Toast", {toastId: makeid()});

Hope This Helped 😄