I just added React-Toastify to my REACT app. I have the below code in my Apps.js

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

function App() {
  return (
    <>
      <Router basename={process.env.PUBLIC_URL}>
        <div className="container-fluid">
          <NavHeader />
          <hr />
          <Switch>
            <Route exact path="/" ponent={HomePage} />
            <Route path="/about" ponent={AboutPage} />
            <Route path="/contact" ponent={ContactPage} />
          </Switch>
        </div>
      </Router>
      <div>
        <ToastContainer transition={Slide} />
      </div>
    </>
  );
}

export default App;

Then in my other pages, I display the Toast using the code below.

  showToastMessage(messageText, messageType = "I") {
    toast.dismiss();
    toast.configure({
      position: toast.POSITION.BOTTOM_RIGHT,
      toastId: 1
    });
    if (messageType === "S") {
      toast.success(messageText);
    }
    if (messageType === "I") {
      toast.info(messageText);
    }
    if (messageType === "E") {
      toast.error(messageText);
    }
  }

When I run the app, the toast is displayed in the bottom right and top right corner of my page.

I have done a lot of searches and did e across this thread and applied the changes suggested, but I am still getting duplicates!

I just added React-Toastify to my REACT app. I have the below code in my Apps.js

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

function App() {
  return (
    <>
      <Router basename={process.env.PUBLIC_URL}>
        <div className="container-fluid">
          <NavHeader />
          <hr />
          <Switch>
            <Route exact path="/" ponent={HomePage} />
            <Route path="/about" ponent={AboutPage} />
            <Route path="/contact" ponent={ContactPage} />
          </Switch>
        </div>
      </Router>
      <div>
        <ToastContainer transition={Slide} />
      </div>
    </>
  );
}

export default App;

Then in my other pages, I display the Toast using the code below.

  showToastMessage(messageText, messageType = "I") {
    toast.dismiss();
    toast.configure({
      position: toast.POSITION.BOTTOM_RIGHT,
      toastId: 1
    });
    if (messageType === "S") {
      toast.success(messageText);
    }
    if (messageType === "I") {
      toast.info(messageText);
    }
    if (messageType === "E") {
      toast.error(messageText);
    }
  }

When I run the app, the toast is displayed in the bottom right and top right corner of my page.

I have done a lot of searches and did e across this thread and applied the changes suggested, but I am still getting duplicates!

• javascript
• reactjs

3 Answers 3

if you use ToastContainer and toast function each together, you will see two toastify. You should use only one.

Your code design some plex. Let me show how to use basic toastify you will understand it.

Firstyle import package. (Step 1)

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

Now, you can call toast. (Step 2)

 toast.configure();

 toast.success("Success Notification !", {
    position: toast.POSITION.TOP_CENTER
  });

  toast.error("Error Notification !", {
    position: toast.POSITION.TOP_LEFT
  });

  toast.warn("Warning Notification !", {
    position: toast.POSITION.BOTTOM_LEFT
  });

  toast.info("Info Notification !", {
    position: toast.POSITION.BOTTOM_CENTER
  });

that's it.

Add your <ToastContainer/> to App.tsx or whatever you named your default root App.js file. After that, DO NOT add <ToastContainer/> to elsewhere.

      <ToastContainer 
            position='top-right' 
            autoClose={5000}
            hideProgressBar={false}
            newestOnTop={false}
            closeOnClick
            rtl={false}
            pauseOnFocusLoss
            draggable
            pauseOnHover
        />  

import React from 'react';
import Routes from './route/route';
import { ToastContainer, toast } from 'react-toastify';

class App extends React.Component {
constructor() {
super();
}

ponentDidMount() {
let root = document.querySelector('#root');
root.children[0].remove()
}

render() {
return (
  <>
    <ToastContainer
      position="top-right"
      autoClose={5000}
      hideProgressBar={false}
      newestOnTop={false}
      closeOnClick
      rtl={false}
      pauseOnFocusLoss
      draggable
      pauseOnHover
    />
    
    <ToastContainer />
    <Routes />
   </>
    )
   }
  }

  export default App;

So in ComponentDidMount two lines solve my problem, Actually in my case IDK why The ToastContainer ponent render twice so i remove the one of them.