EventManager.js:87 <SHOW_TOAST> Event is not registered. Did you forgot to bind the event ?

[jayar95]

There are times I want to show the toast outside of a button click. In these cases, the console will show the following alert:
EventManager.js:87 <SHOW_TOAST> Event is not registered. Did you forgot to bind the event ?

[fkhadra]

Hello,

Can you provide me a sample to reproduce it please ?

Thanks

[jayar95]

Yes! Sorry I forgot to include one originally!

https://gist.github.com/jayar95/30598badd2d7b38a6b30374329752da7

[fkhadra]

Thanks. I'll investigate asap !

[fkhadra]

I think that you are calling the toast function somewhere in your render method. Right ?

What is happening is that the ToastContainer is not rendered at this time which means that the event won't be bonded.

In your case it will be best to call the toast function inside componentWillReceiveProps:

class Foo extends Component {

  componentWillReceiveProps(nextProps) {
    if (nextProps.location.state && nextProps.location.state.updatedAccount)
      toast('Account Updated! If you published a new account, the initial data pull could take a few minutes.', {
        type: toast.TYPE.SUCCESS
      });
  }

  render() {
    return <div>Hello</div>
  }
}

[mtompkins]

As the question is still open I thought I'd share my similar struggle. I'm not trying to hijack the thread here but I thought others might search down this particular error and find my addition useful.

I thought the componentDidMount would be sufficient but it fails on initial load. Navigating back to the page does fire it off as expected. Any thoughts on what I might be missing?

I have a router Home page I'm trying to do a toast with as:

export default class Home extends Component {
  componentDidMount() {
    console.log('mounted');
    UpRcvdToast();
  }
  render() {
    return (
      <div>
        <div className={styles.container} data-tid="container">
          <h2>Home</h2>
          <Link to="/counter">to Counter</Link><br />
          <Link to="/foo">to Foo</Link><br />
        </div>
      </div>
    );
  }
}

and the function lives in a page of toast configs imported as:

export function UpRcvdToast() {
  log.debug('Trigger UpRcvdMsg');
  toast(<UpRcvdMsg />, UpRcvdOpts);
}

FWIW if I add a timer it does work as intended but it feels hacky. Meaning:

componentDidMount() {
    setTimeout(() => {
      UpRcvdToast();
    }, 1500);
  }

[fkhadra]

I'm now able to reproduce the issue using react router. I'm on it.

[mtompkins]

Thanks so much - love this little bit of code btw - thanks for sharing!

[fkhadra]

Glad you like it. Don't forget to pick the latest version 😁

[fkhadra]

FYI, I have a fix for that issue. I'll try to make the patch for this week or the next one.

[mtompkins]

Awesome - thanks for the update. Will test it a bit when released.

[fkhadra]

This has been fixed with release 1.6.0

[gitneeraj]

@fkhadra
toast.success() dont seem to fire up in my react-redux project when I successfully login. Could you please help?

When API returns 401, toast.error() works fine. But when API return 200, I'm doing a route change to /dashboard. That's when toast.success('You have been logged in successfully!') does not seem to fire up.

development branch - https://github.com/realneeraj/react.git

[fkhadra]

@RealNeeraj sure. I'll have a look later on when I'm back from work.

[gitneeraj]

Thank you!

[fkhadra]

@RealNeeraj on login success, the ToastContainer is calling componentWillUnmount:

Inside ToastContainer's componentWillUnmount I clean all events listeners.

There is something that I don't understand:

• componentWillUnmount is called but the component is still mounted
• I expected componentDidMount or componentWillMount to be called but it's not the case

I'm wondering how it's possible that componentWillUmount is called and the component is not removed from the rendering tree.

[gitneeraj]

I'm pretty new to React and I'm not really sure I understand it well though.

I had just following your anwser here #117 - to put in App level. Is it because of this that even after componentWillUnmount is called, the component is still mounted (I'm just suspecting and I can we completely wrong here).

[gitneeraj]

@fkhadra - My bad brother. I had accidentally placed another <ToastContainer /> in the Login.js Component. Removing it solved the issue. All is well now.

Really appreciate your kind responses and help. react-toastify is a great piece of code.

Thank you once again! Cheers :)