Search code examples
reactjsreact-toastify

React-Toastify is not displaying properly

I am using React Toastify in my React.js file where i want to display a toast message that user successfully added. Therefore I used API to send the data to add in my database using Spring Boot which is working fine and i am using axios to display toast message when data is added to the database successfully. But The toast pop up is not displaying properly as well as it get to huge when without any styling. This type of image appear when i click on submit

Code Snippet:

App.js

   return (
  <>
  <div>

  <BrowserRouter>
  
  {auth &&<DashBoard/>}
  <ToastContainer/>
  <Routes>
    <Route path='/' element={<Login auth={setAuth}/>}/>
    <Route path='/admin' element={<Table/>}/>
    <Route path='/add' element={<AddUser/>}/>
  </Routes>
  
  </BrowserRouter>
  </div>
  </>
  );

AddUser.js

  const handleSubmit=(e)=>{
    e.preventDefault();
    setData({...data,})
    console.log(data);
    axios.post('/add',data).then((response)=>{
      console.log("completed");
      toast.success("User Added Successfully");
    }).catch((error)=>{
      console.log("Not completed");
    })
  }

This is the Handle submit function in the Form

Solution

  • I faced the same problem with you. This was because I mistakenly forgot to import the styles of react-toastify.

    To solve this, you need to add this line in your src/index.js.

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

    Hope this help!