How to Prevent Duplication of React Toastify in Functional Components?

Question

When I use React-Toast, It always duplication like the Image. How prevent the duplication? Toast Duplication Like This

    const Login = () => {

  // ========= Loading ============
  if (loading) {
    return <Loading />;
  }

  // ========= Error ============
  if (error) {
    if (error.code === "auth/user-not-found") {
      toast.error("User Not Found !");
    } else if (error.code === "auth/wrong-password") {
      toast.error("Password is Wrong !. ");
    }
  }

  if (user) {return <></>}
};

export default Login;

Answer 1

As far as we don't have the full picture of the question, I'd recommend to take your attention on these 2 things:

• Error message on screenshot is different that you have passed to toast.error . So maybe toast is duplicated in some other place?
• You can check the documentation of React Tostify (if you're using this library), they have a section about this issue: https://fkhadra.github.io/react-toastify/prevent-duplicate . Usually providing toast-id fixes the issue.

If it doesn't help you, please provide more details (scenario when you have 2 toasts on the page, api section, parent component where Login is used)