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;

I would like to see the API call section.

Sourav
– Sourav

2022-05-05 18:35:49 +00:00
Commented May 5, 2022 at 18:35 — Sourav
– Sourav, Commented May 5, 2022 at 18:35

Alex · Accepted Answer · 2022-05-05 19:46:16Z

0

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)

answered May 5, 2022 at 19:46

Alex

261 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Prevent Duplication of React Toastify in Functional Components?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related