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