CODEWITHSUNDEEP
reactjstoast
kevinob
kevinob

Reputation: 687

Toast is not rendered (react-toastify component)

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!

Upvotes: 43

Views: 95188

Answers (14)

Muhammad Muneeb Waqas
Muhammad Muneeb Waqas

Reputation: 207

I was facing alot of issue while rendering the toast in my vite reactjs web application.

You have to install this package :

npm i react-toastify

Then you have to import it in the same order in the component in which you have to use it.

import 'react-toastify/dist/ReactToastify.css';
import { ToastContainer, toast } from 'react-toastify';

Then you have to include this element in your code as well

<ToastContainer></ToastContainer>

And finally you can use it.

Upvotes: 0

Priyanka Joshi
Priyanka Joshi

Reputation: 11

// React-Tostify configuration

import "react-toastify/dist/ReactToastify.css";

import {ToastContainer} from "react-toastify";

maintain this order and include <ToastContainer /> in return This worked for me!

Upvotes: 1

Imran Rashid
Imran Rashid

Reputation: 3502

Tried everything here but nothing work then I move the following lines in App.js then it start working.

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

Upvotes: 3

ahmed jwifel
ahmed jwifel

Reputation: 11

you have to import this CSS statement in the component that you want to render the toastify at

import 'react-toastify/dist/ReactToastify.css';

Upvotes: 1

Evans Kiptarus Kibet
Evans Kiptarus Kibet

Reputation: 194

To make use of the react-toastify, Please follow below steps:-

  1. Install the npm package

    npm i toastify --save

  2. Import the react-toastify as shown below in that given order

    import 'react-toastify/dist/ReactToastify.css'; // import first

    import { ToastContainer, toast } from 'react-toastify'; // then this

Upvotes: 0

Karan Shaw
Karan Shaw

Reputation: 1406

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

Upvotes: 111

Sezer Kenar
Sezer Kenar

Reputation: 1

import React from "react";
import { ToastContainer,toast } from 'react-toastify'; // <- add ToastContainer
import 'react-toastify/dist/ReactToastify.css'; // <- add line 

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>
             <ToastContainer /> {/* <- add line */}
           </div>
      )}
}

Upvotes: 0

Agniswar Chakraborty
Agniswar Chakraborty

Reputation: 287

You need to remember to include the <ToastContainer /> in your render.

Upvotes: 2

Pedram
Pedram

Reputation: 16615

For me moving ReactToastify.css above toast solved the issue!

import 'react-toastify/dist/ReactToastify.css'; // import first
import { ToastContainer, toast } from 'react-toastify'; // then this

Upvotes: 2

Dylan Pierce
Dylan Pierce

Reputation: 4668

The other solutions didn't work for me - turns out I wasn't passing a string to the toast.* function. For example:

  getSomethingFromApi()
     .then((response) =>  { 
         // this works fine because response.message is a string
         toast.notify(response.message)
      })
     .catch((error) => {
         // this will fail to render because error is an object, not a string
         toast.error(error)
      })

Upvotes: 6

alihussain kabri
alihussain kabri

Reputation: 170

install react-toastify using command

npm i react-toastify

Then:

import {ToastContainer,toast} from 'react-toastify'

and in return add

<ToastContainer />

and after that when you do toast('hy') then it will show toast

Upvotes: 15

Bayram
Bayram

Reputation: 221

My mistake was importing toast without {} curly braces because my course instructor did so.

Try to change this:

    import toast from 'react-toastify';

To:

    import { toast } from 'react-toastify';

Also according to all other 'react-toastify' stackoverflow responses, installing latest version causes problem. So try uninstalling it and install older version that your course instructor did or version 4.1 seems to be working for most people. Uninstall first:

    npm uninstall react-toastify --save

Then install 4.1 version:

    npm i [email protected]

Upvotes: 0

user8608046
user8608046

Reputation:

Even better, import minified css:

import 'react-toastify/dist/ReactToastify.min.css';

or in case you are importing it in .scss file

@import '~react-toastify/dist/ReactToastify.min.css';

Upvotes: 10

Amin Eslami
Amin Eslami

Reputation: 181

Before declaring your class, add the following line:

toast.configure();

Upvotes: 18

Related Questions