Topic: Issues with Toast Notifications
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?
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 commented 5 years ago
Awesome! Thank you. I didn't know it had to be returned and not just invoked. Much appreciated!
Jakub Chmura staff premium commented 5 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.23.1
- Device: Desktop
- Browser: FireFox
- OS: Win10
- Provided sample code: No
- Provided link: No