there is another toastify when I close the fitst

Question

Hi I'm using react toastify in my next project .

here's the image

I wish the image could show what I mean . I'm closing the first toast , but in the image you can see that there is another toast behind it and I really don't know where it comes from .

Toast conatiner (I'm using only one and in my root dir)

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

<ToastContainer
        position="top-right"
        autoClose={3000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
        theme="light"
      />

Toast configs

export const toastConfings = {
    position: "top-right",
    autoClose: 5000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
    progress: undefined,
    theme: "light"
}

How I use toast

    toast.success('Link copied', toastConfings);

Is there anyways that it shows only one toast ?

Answer 1

Have you examined the code to identify where the toast.success('Link copied', toastConfings); function might be called twice?

It would be beneficial to investigate if there are any bugs causing this behavior.

In case debugging becomes challenging, consider providing a toast ID to prevent duplicates.

Toastify Doc

import React from 'react';
import { toast } from 'react-toastify';

const customId = "custom-id-yes";

function Example(){
  const notify = () => {
    toast("I cannot be duplicated!", {
      toastId: customId
    });
  }

  return (
    <div>
      <button onClick={notify}>Notify</button>
    </div>
  )
}