Topic: Toast with no icon
Hello,
Toasts are working good but icons are not showing. What can I do to debug/fix this?
code attached:
import { toast } from "mdbreact";
export const success = msg => {
toast.success(msg, {
position:"top-right"
});
};<ToastContainer
hideProgressBar={true}
newestOnTop={true}
autoClose={1500}
/>
success("Success");
Ah I see what the problem is, you have to add icons to the markup (our preview is not 100% the same, becouse of technological limitations).
Example code:
import React, { Component, Fragment } from 'react';
import { MDBBtn, ToastContainer, toast, MDBIcon } from 'mdbreact';
class NotificationsPage extends Component {
notify(type){
return () => {
switch (type) {
case 'info':
toast.info(<span><MDBIcon icon="info-circle" /> Info message</span>);
break;
case 'success':
toast.success(<span><MDBIcon icon="check" /> Success message</span>);
break;
case 'warning':
toast.warn(<span><MDBIcon icon="warning" /> Warning message</span>);
break;
case 'error':
toast.error(<span><MDBIcon icon="exclamation-circle" /> Error message</span>);
break;
default:
return;
}
};
};
render(){
return (
<Fragment>
<MDBBtn color="info" onClick={this.notify('info')}>Info</MDBBtn>
<MDBBtn color="success" onClick={this.notify('success')}>Success</MDBBtn>
<MDBBtn color="warning" onClick={this.notify('warning')}>Warning</MDBBtn>
<MDBBtn color="danger" onClick={this.notify('error')}>Error</MDBBtn>
<ToastContainer
hideProgressBar={true}
newestOnTop={true}
autoClose={5000}
/>
</Fragment>
);
}
}
export default NotificationsPage;
Close icon is showing but no bigger item as an example (i.e checkmark in success toast)
I imported toast and ToastContainer in different files (I centralized toast in a file and I import ToastContainer in the view I want to show it)
As I said toast is showing but no left icon as examples
Hello,
Do you mean that Close icons don't show?
Import should look like this:
import { toast, ToastContainer } from "mdbreact";FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.8.4
- Device: PC
- Browser: Chrome
- OS: Ubuntu 16
- Provided sample code: Yes
- Provided link: No