React-toastify: Toast not disappearing

[haydencarlson]

toast.success("Your passwords do not match", {autoClose: 4000});

Using toast.dismiss(<toast_id) . Even when I leave it default it won't work.

No errors in console and I tried modifying the package I just can't figure it out.
Anyone else experienced this or have any ideas?

[fkhadra]

hello @haydencarlson,
Can you provide all the snippet ? So I can help you ?

Thanks

[haydencarlson]

I have a view which contains the toast container

import React, { Component } from 'react';
import NavBar from '../components/navBar.js';
import { ToastContainer } from 'react-toastify';

export default class Authorization extends Component {
  render() {
    return (
      <div className="AuthorizationPageContainer">
        <NavBar/>
        <ToastContainer/>
      </div>
    )
  }
}

In one of my components:

handleFormSubmit = (e) => {
    e.preventDefault();
    if (this.state.password === this.state.password_confirmation) {
    } else {
      toast.success("Your passwords do not match", {autoClose: 4000});
    }
  }

It shows up fine, and everything seems to be working it just won't auto close unless I explicitly call toast.dismiss passing in the ID. I'd prefer not to run setTimeouts everytime haha

[haydencarlson]

Anyone?

[fkhadra]

Hey @haydencarlson,

I took your code but I'm unable to reproduce the issue :( . Can you tell me more about your setup please ?

• Browser version
• Are you using react-router ?
• React version ?

[haydencarlson]

Version 54.0.2840.90 (64-bit)

Using react router yes

React: 15.4.1

[fkhadra]

Hello @haydencarlson,

I think I have an idea why your toast it's not removed.

Your Authorization Component is getting mounted and umounted over and over again, so the <ToastContainer/> will be unmounted as well. When the ToastContainer is umounted, all the related events are unbound.

Move the ToastContainer at the root of your application to solve the issue.

[haydencarlson]

@fkhadra you were right.

Thanks !
Closing.

[ecdeveloper]

I'm getting the same exact issue. The ToastContainer is only defined in App.jsx:

const App = () => (
  <BrowserRouter>
    <main className="container">
      // Some more stuff goes here
      <Routes />
      <footer className="footer">Footer</footer>

      <ToastContainer autoClose={1000} />
    </main>
  </BrowserRouter>
);

And then calling in a component:

toast.success("Some success message", {
    className: "toast-success",
});

The toast shows up, shows the progress bar, although no progress bar animation is happening and the toast doesn't disappear after 1s.

React: 16.5.2
Chrome: 71.0.3578.98
Using react-router

Thoughts?

[fkhadra]

Hello @ecdeveloper,

Could you reproduce the issue on codesandbox please.

PS: next time don't hesitate to open a new issue. It's easier for me to keep a track on.

Thanks

[ecdeveloper]

hi @fkhadra,

Thanks for your reply. In sandbox it all works fine, so I think there may be some conflicting module (maybe?) in my setup. Will try to debug myself, thank you.

[ecdeveloper]

Magic. Removed the existing package. Reinstalled it. Everything works like a charm now. I think there might've been a glitch in the older version I was using before.

[fkhadra]

@ecdeveloper perfect probably a cache issue or something like that. I'm glad you fixed your issue 👍

[kkomelin]

My problem was that if the progress bar was disabled hideProgressBar={true} at the ToastContainer props level, toasts didn't disappear automatically and autoClose={5000} setting was ignored. I've fixed it following @fkhadra advice and moving ToastContainer into my root component (App).