React-Toastify is not displaying properly

Question

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.

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

your question need more info for example what is your code? – Abbas Bagheri Feb 21 '23 at 11:00 — Abbas Bagheri, Feb 21 '23 at 11:00
yes i updated it with the code – Mustafa_Dahodwala 19_13 Feb 21 '23 at 11:04 — Mustafa_Dahodwala 19_13, Feb 21 '23 at 11:04

score 1 · Answer 1 · answered Feb 21 '23 at 11:13

I have an example and I hope it helps you :

// import tostify js and css
import {Slide, toast,ToastContainer} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function Login(){


    const doLogin = (e)=>{
        
        if(username === '' || password == ''){
            toast.error('Username and Password is Required!', {
                position: "bottom-right",
                autoClose: 5000,
                hideProgressBar: false,
                closeOnClick: true,
                pauseOnHover: true,
                draggable: true,
                progress: undefined,
                theme: "colored",
            });
            return;
        }
        ....
    }

    return (<div className='user-login'>
        <div className='admin-panel'>
                ...
                <ToastContainer  transition={Slide}  />
            </div>
        </div>
    </div>)
}
export default Login;

score 1 · Accepted Answer · answered Feb 21 '23 at 11:35

1

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!

answered Feb 21 '23 at 11:35

haptn

650
6
11

React-Toastify is not displaying properly

2 Answers2