Toast with no icon


Topic: Toast with no icon

gllermaly asked 3 years ago

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");

Jakub Mandra staff premium answered 3 years ago

Hello,

Do you mean that Close icons don't show?

 

Import should look like this:

import { toast, ToastContainer } from "mdbreact";

gllermaly answered 3 years ago

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


Jakub Mandra staff premium answered 3 years ago

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;

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: 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
Tags