Topic: Issues with Toast Notifications

Stefischer free asked 3 years ago

MDB Version 4.23.1 (Wouldn't let me pick from dropdown)

I'm having some trouble with the Toasts component. It seems to be not appearing properly. This is my render method to see wrappers.

render() {
                    {this.state.dataReceived ? this.renderSettings() : <Spinner animation="border" role="status"><span className="sr-only">Loading...</span></Spinner>}


And this is what I'm calling inside my form submit method

toast.success("Inconceivable!", {
    position: "top-right",
    autoClose: 5000       

And lastly the imports

import { ToastContainer, toast } from 'mdbreact';

When the toast.success() method is called, nothing happens / appears on screen. Am I doing something incorrectly?

Jakub Chmura staff answered 3 years ago

Hi @Stefischer,

I didn't see where you call a method that fired a notification.

I create a simple snippet to show you how to achieve that.

import React from 'react';
import { toast, ToastContainer, MDBContainer } from 'mdbreact';

const NotificationPage = () => {

  const notify = () => {
    return () => {
      toast.success('Success message', {});

  return (
      <button className='btn btn-success' onClick={notify('success')}>
        Notification button

export default NotificationPage;

Best, Kuba

Stefischer free commented 3 years ago

Awesome! Thank you. I didn't know it had to be returned and not just invoked. Much appreciated!

Jakub Chmura staff commented 3 years ago

@Stefischer you're welcome.

If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.   Best Regards,   Kuba

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.23.1
  • Device: Desktop
  • Browser: FireFox
  • OS: Win10
  • Provided sample code: Yes
  • Provided link: No