REACT-Toastify - Duplicates toasts

if you use ToastContainer and toast function each together, you will see two toastify. You should use only one.


Your code design some complex. Let me show how to use basic toastify you will understand it.

Firstyle import package. (Step 1)

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

Now, you can call toast. (Step 2)

 toast.configure();

 toast.success("Success Notification !", {
    position: toast.POSITION.TOP_CENTER
  });

  toast.error("Error Notification !", {
    position: toast.POSITION.TOP_LEFT
  });

  toast.warn("Warning Notification !", {
    position: toast.POSITION.BOTTOM_LEFT
  });

  toast.info("Info Notification !", {
    position: toast.POSITION.BOTTOM_CENTER
  });

that's it.


Add your <ToastContainer/> to App.tsx or whatever you named your default root App.js file. After that, DO NOT add <ToastContainer/> to elsewhere.

      <ToastContainer 
            position='top-right' 
            autoClose={5000}
            hideProgressBar={false}
            newestOnTop={false}
            closeOnClick
            rtl={false}
            pauseOnFocusLoss
            draggable
            pauseOnHover
        />