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

React-Toastify is not displaying properly – Reactjs

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

Tags:

2

Answers


  1. 0

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

    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!

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

Back To Top
Search