React-toastify showing multiple toast

Question

I am building a React app with several components and in at least half of them I am using React-notify and it's working properly in almost all of them except one. In this one when I trigger the toast I'm getting four toasts, one behind the other, but I believe they are not different toasts, since they have the same ID.

I found this thread https://github.com/fkhadra/react-toastify/issues/182, here the user was having the same issue as mine, the only exception is that I am not setting autoclose, he even provided a gif showing the problem:

https://i.sstatic.net/SiqRo.jpg

The solution according to this thread would be remove all <ToastContainer /> of the components and render it in the app root, which in my case is App.js. I did that, however the toasts are not being shown anymore, I don't know if I've done it right, though.

Besides that I also tried to set a custom ID and it didn't change anything.

I am using React-router-dom, maybe this is influencing in something, I couldn't find a proper answer nor in the documentation neither on any other source.

Here is simplified version of my App.js:

import Layout from './containers/Layout/Layout';

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

import { BrowserRouter, Route, Switch } from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Layout>
          <Switch>
            <Route path="/clientes" exact component={ClientesControls} />
            <Route path="/adm" exact component={AdmControls} />
            <Route path="/" component={OrcConfig} />
            <ToastContainer />
          </Switch>
        </Layout>
      </BrowserRouter>
    );
  }
}

Here is a sample of the componente whose bug is being generated:

import React from 'react';

import axios from '../../../axios';

import { toast } from 'react-toastify';

const listarProdutosItens = props => {
    
    const excluirItemHandler = i => {
        
        let key = props.listaItens[i].key
        let categoria = props.listaItens[i].categoria

        axios.delete(`/adm/${categoria}/${key}.json`)
            .then(res => {
                props.fetchLista()
                notify('excluído')
            })
            .catch(error => notify('não excluído'))
    }

    const notify = (arg) => {
        if (arg === 'excluído') {
            toast.success('Produto removido com sucesso')
            console.log('TESTE')
        } else if (arg === 'não excluído') {
            toast.error('Erro ao tentar remover produto')
        }
    }

    return (
        <div className="row border-bottom mt-2">
            <button onClick={() => excluirItemHandler(i)} ></button>
            {/* <ToastContainer /> */}
        </div>
    )

}

The components that are working properly have the same sintaxe.

Any help would be very appreciated.

I don't believe that. So simple and I couldn't see. Thank you very much, it worked great. If you want to edit your comment as an answer I'll be glad to accept it. — Berg_Durden
– Berg_Durden, Commented Jun 25, 2020 at 14:55

Klaus Haukenstein · Accepted Answer · 2021-09-23 15:42:46Z

38

I was having this same problem (and my was already outside the router stuff). This probably doesn't fix the underlying issue, but what worked for me was to add a custom toast id, that is change

toast.success('Produto removido com sucesso')

to

toast.success('Produto removido com sucesso', {
    toastId: 'success1',
})

and the duplicate toasts no longer showed up.

answered Sep 23, 2021 at 15:42

Klaus Haukenstein

6981 gold badge6 silver badges11 bronze badges

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

4 Comments

douglasrcjames Over a year ago

Fixed my issue, thanks!

Bilal Mohammad Over a year ago

This fixed my issue but how does it works ? What exactly happened by adding toastId ?

Klaus Haukenstein Over a year ago

@BilalMohammad I don't know the underlying code, but this is one recommended solution from the documentation: fkhadra.github.io/react-toastify/prevent-duplicate

Klaus Haukenstein Over a year ago

Just a note to anyone seeing this: I haven't investigated the underlying issue, but I'm pretty sure looking back was that we toasted in a useEffect and had React in strict mode, which renders all hooks twice.

demkovych · Accepted Answer · 2020-06-25 14:56:08Z

10

Just move <ToastContainer /> outside of <Layout />

answered Jun 25, 2020 at 14:56

demkovych

9,0453 gold badges23 silver badges27 bronze badges

Comments

Guillermo Gutiérrez · Accepted Answer · 2020-06-25 15:07:39Z

6

Move the <ToastContainer/> anywhere outside of <Switch>, because:

<Switch> is unique in that it renders a route exclusively.

Also:

All children of a <Switch> should be <Route> or <Redirect> elements. Only the first child to match the current location will be rendered.

See: https://reacttraining.com/react-router/web/api/Switch

edited Jun 25, 2020 at 15:07

answered Jun 25, 2020 at 15:02

Guillermo Gutiérrez

18k18 gold badges93 silver badges120 bronze badges

1 Comment

Berg_Durden Over a year ago

Thank you. It really makes sense.

Jitendra Rathor · Accepted Answer · 2021-05-12 12:14:23Z

2

import the toast in your component where you have added toaster logic ex. given below:

import { toast } from 'react-toastify';
// avoid the ToastContainer to add here and the css as well

Then at the root of your application:

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

const CommonComponent = () => (
  <div>
    <ToastContainer />
    <OtherComponent />
  </div>
)

answered May 12, 2021 at 12:14

Jitendra Rathor

6869 silver badges12 bronze badges

Comments

Avichai Iluz · Accepted Answer · 2023-06-27 10:01:11Z

2

add toastId:

toast.success('Produto removido com sucesso', {
    toastId: 'success1',
})

answered Jun 27, 2023 at 10:01

Avichai Iluz

212 bronze badges

Comments

RVK · Accepted Answer · 2022-08-05 07:50:02Z

1

You must also certainly check that your code does not have multiple <ToastContainer/> in different places of your application

answered Aug 5, 2022 at 7:50

RVK

631 silver badge7 bronze badges

1 Comment

NicoWheat Over a year ago

This suggestion solved my problem. I thought you needed a ToastContainter in every component where you called 'toast' function. Instead, I added a single <ToastContainer /> at the root of my app, and all my toasts in children components worked great. Thank you.

Asiful Alam · Accepted Answer · 2022-09-27 19:38:07Z

1

const notify = (arg) => {
    if (arg === 'excluído') {
        toast.success('Produto removido com sucesso')
        console.log('TESTE')
    } else if (arg === 'não excluído') {
        toast.error('Erro ao tentar remover produto')
    }
}

To

const notify = (arg) => {
    if (arg === 'excluído') {
        toast.success('Produto removido com sucesso', {
        toastId: "success"        
    })
   
    } else if (arg === 'não excluído') {
        toast.error('Erro ao tentar remover produto', {
        toastId: "error"        
    })
    }
}

Just use custom toastId and it will fix your issue!

answered Sep 27, 2022 at 19:38

Asiful Alam

112 bronze badges

Comments

double-beep · Accepted Answer · 2023-02-21 12:10:18Z

1

Just add limit={1} to ToastContainer. Like this:

<ToastContainer limit={1}>

Reference: https://fkhadra.github.io/react-toastify/limit-the-number-of-toast-displayed/

edited Feb 21, 2023 at 12:10

double-beep

5,66019 gold badges43 silver badges50 bronze badges

answered Feb 21, 2023 at 11:42

Yair Biber

213 bronze badges

Comments

Hamza awan · Accepted Answer · 2023-10-24 14:38:42Z

1

You Just need to control the of toaster and it will resolve the issue

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

In React Application when you called the Toaster Component. Make the Prop "autoClose" as 5000 like shown in code above. It will resolve the issue.

answered Oct 24, 2023 at 14:38

Hamza awan

111 bronze badge

Collectives™ on Stack Overflow

React-toastify showing multiple toast

9 Answers 9

4 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

4 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related