Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – why react toastify doesn't work in my project?

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

Tags:

2

Answers


  1. 0

    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>
    );
  }
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search