Toast is not rendered (react-toastify component)

Question

I'm using react-toastify and I can't get a simple toast to be rendered...

import React from "react"; import { toast } from 'react-toastify';  class MyView extends React.Component<{}, {}> {      constructor() {         super();         this.state = {          };     }      componentDidMount() {         toast("Hello", { autoClose: false });     }      notify = () => toast("Hello", { autoClose: false });      render() {         return (            <div>              <button onClick={this.notify}>Notify</button>            </div>       )} } 

package.json (in "dependencies" section)

"react": "^16.2.0", "react-toastify": "^3.2.2" 

If I debug it, I see that my toasts are queued, _EventManager2 never gets the _constant.ACTION.MOUNTED event that normally emits the toasts from the queue...

/**  * Wait until the ToastContainer is mounted to dispatch the toast  * and attach isActive method  */ _EventManager2.default.on(_constant.ACTION.MOUNTED, function (containerInstance) {   container = containerInstance;    toaster.isActive = function (id) {     return container.isToastActive(id);   };    queue.forEach(function (item) {     _EventManager2.default.emit(item.action, item.content, item.options);   });   queue = []; }); 

..so there might be something wrong with that ToastContainer but what? I just use the sample code from the documentation.

Thank you for your help!

Answer 1

You have to also import 'react-toastify/dist/ReactToastify.css';

  import React, { Component } from 'react';   import { ToastContainer, toast } from 'react-toastify';   import 'react-toastify/dist/ReactToastify.css';   // minified version is also included   // import 'react-toastify/dist/ReactToastify.min.css';    class App extends Component {     notify = () => toast("Wow so easy !");      render(){       return (         <div>         <button onClick={this.notify}>Notify !</button>           <ToastContainer />         </div>       );     }   } 

Answer 2

Before declaring your class, add the following line:

toast.configure();