Issues with Toast Notifications

Topic: Issues with Toast Notifications

Stefischer free asked 4 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() {
        return(
            <div>
                <Container>
                    <ToastContainer
                    position="top-right"
                    autoClose={5000}  
                    newestOnTop
                    rtl={false} 
                    />
                <Row>
                    <Col>
                    {this.state.dataReceived ? this.renderSettings() : <Spinner animation="border" role="status"><span className="sr-only">Loading...</span></Spinner>}
                    </Col>
                </Row>
                </Container>

            </div>
        );
    }

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?

Add comment

Jakub Chmura staff answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

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 (
    <MDBContainer>
      <button className='btn btn-success' onClick={notify('success')}>
        Notification button
      </button>
      <ToastContainer
        position='top-right'
        autoClose={5000}
        newestOnTop
        rtl={false}
      />
    </MDBContainer>
  );
};

export default NotificationPage;

Best, Kuba

Stefischer free commented 4 years ago

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

Jakub Chmura staff commented 4 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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

Stefischer

50Support score
4Questions 3Answers 2Snippets