How to render multiple toasts using map loop in react

Question

I am trying to render multiple toasts using .map loop. But it is only the toast with the last element from the loop.

var errorCount = { error1: 50, error2: 101, error3: 70, error4: 105 };
    Object.keys(errorCount).map((element, index) => {
      if (errorCount[element] > 100) {
        console.log(element);
        toast.error(
          "Message Title: " + element + "\nErrors: " + errorCount[element],
          {
            autoClose: false,
            toastId: element,
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: true,
            draggable: true,
            progress: undefined,
            theme: "dark",
          }
        );
      }
    });

The above loop should display "error2" first then "error4". But it is only displaying error4.

Did you try to add an delay between toast? – Tuan Dec 05 '22 at 08:01 — Tuan, Dec 05 '22 at 08:01
Use "for" or "forEach" instead of map. – Vugar Taghiyev Dec 05 '22 at 08:02 — Vugar Taghiyev, Dec 05 '22 at 08:02
I'm new to react. Can you please explain a bit more? – Dev Dec 05 '22 at 08:02 — Dev, Dec 05 '22 at 08:02
@VugarTaghiyev tried with "for" loop. Still same issue. – Dev Dec 05 '22 at 08:05 — Dev, Dec 05 '22 at 08:05
trythis: setTimeout(() => { //your toast here }, 100); – Vugar Taghiyev Dec 05 '22 at 08:05 — Vugar Taghiyev, Dec 05 '22 at 08:05
@VugarTaghiyev still same issue :( – Dev Dec 05 '22 at 08:20 — Dev, Dec 05 '22 at 08:20

score 0 · Accepted Answer · answered Dec 05 '22 at 08:58

I have tried like this and is working for me..

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

export default function App() {
  var errorCount = { error1: 50, error2: 101, error3: 70, error4: 105 };
  Object.keys(errorCount).map((element, index) => {
    if (errorCount[element] > 100) {
      console.log(element);
      toast.error(
        "Message Title: " + element + "\nErrors: " + errorCount[element],
        {
          autoClose: false,
          toastId: element,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "dark"
        }
      );
    }
  });

  return (
    <div className="App">
      <ToastContainer />
    </div>
  );
}

sandbox url - https://codesandbox.io/s/goofy-worker-1d8kwi?file=/src/App.js:0-797

How to render multiple toasts using map loop in react

1 Answers1