why react toastify doesn't work in my project?

Question

I am trying to use react toastify in this function inside my signup page

  const submitionHandler = ()=>{
    let userData = {name,email,password,phone,country,gender};
    //validate data

    //handle api
    axios.post('http://localhost:8000/admins',userData)
    .then(res=>{
      toast.success("User has been registered successfully!");
      navigate(`/login`);
    })
    .catch(err=>{
      toast.error(err.message);
    })
  }

I installed the library and imported these files

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

I rendered toast container inside the app.js too

<>
      <Router>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/login' element={<Login />} />
          <Route path='/signup' element={<SignUp />} />
          <Route path='/Users' element={<Users />} />
          <Route path='*' element={<NotFound />} />

        </Routes>
      </Router>
      <ToastContainer/>
</>

I imported this in app.js

import SignUp from './pages/SignUp';
import { ToastContainer } from 'react-bootstrap';

everything is working properly but the toastify notification doesn't show up

Answer 1

Following your toastify document https://www.npmjs.com/package/react-toastify

1- you need to add <ToastContainer /> in place that you need to present the toast.

2- use toast hook.

Check the following example.

import React from 'react';

  import { ToastContainer, toast } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  
  function App(){
    const notify = () => toast("Wow so easy!");

    return (
      <div>
        <button onClick={notify}>Notify!</button>
        <ToastContainer />
      </div>
    );
  }

Answer 2

i think the problem is in your import in your app.js mainly so try the following.

 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
    import { ToastContainer } from 'react-toastify';
    import 'react-toastify/dist/ReactToastify.css';
    
    <Router>
      <Routes>
        {/* all you do here... */}
      </Routes>
      <ToastContainer />
    </Router>

try this and let me know

Answer 3

It seems that you are importing ToastContainer from "react-bootstrap" instead of "react-toastify"