how can I pass success or error message using react-toastify when using axios method

Question

I want to show success or error message depending upon the HTTP response status code that I will receiving upon sending my axios request ,using react-toastify (For example if the status code is 406 react-toastify should show a error message like "Some fields are empty" or if status code is "422" is should show a error message like "email already registered" and in case of status code "200" react-toastify should show a message "Account created successfully") on frontend.

Here is my backend api code

router.route('/register').post(upload.single('photo'), (req, res) => {

  const name = req.body.name;
  const email = req.body.email;
  const phone = req.body.phone;
  const work = req.body.work;
  const password = req.body.password;
  const cpassword = req.body.cpassword;
  const photo =  req.file.filename;

  
  if(!name || !email || !phone || !work || !password || !cpassword || !photo ){
    return res.status(406).json({message:"Some fields are missing"}) ;
    
}
  User.findOne({email: email})
  .then((userExist)=>{
         if (userExist){
             return res.status(422).json({Error:"Email already registered"});
            
       }

       const newUserData = {
        name,
        email,
        phone,
        work,
        password,
        cpassword,
        photo
    }

    const newUser = new User(newUserData);
       newUser.save().then(()=>{
        res.status(201).json({message:"user created successfuly"});
        alert("user created succcessfully")
             }).catch((err)=>res.status(500).json({error:"registeration failed"})
             );
         }).catch((err)=>{console.log(err);});
         
         });

Here is the function on front that fetch data from input field

   const handleSubmit = (e) => {
        e.preventDefault();
        let url = 'http://localhost:3000/register'
        const formData = new FormData();
        formData.append('name', newUser.name);
        formData.append('email', newUser.email);
        formData.append('phone', newUser.phone);
        formData.append('work', newUser.work);
        formData.append('password', newUser.password);
        formData.append('cpassword', newUser.cpassword);
        formData.append('photo', newUser.photo);

        axios.post(url , formData)
             .then(res => {
                console.log(res)
                history.push('/login')
                
             } )
             .catch(err => {
                console.log(err);
                
             });
    }

Gustavo Farias · Accepted Answer · 2021-12-07T18:41:40.407

1

Assuming you already have react-toastify setup, just check the response status and trigger toast if it's equal to the value you want, 200 in your case. Like this:

 axios.post(url , formData)
     .then(res => {
        if (res.status === 200)
          toast.success("Success!");

        history.push('/login')
                
        } )
     .catch(err => {
        console.log(err);
                
     });

Edit: If it's the newUser function you are calling, the status on POST requests will be 201 when they succeed, opposed to 200, which you mentioned in the question. If that's the case, just replace 200 with 201.

edited Dec 07 '21 at 18:41

answered Dec 07 '21 at 18:30

Gustavo Farias

393
5
15

I have tried this but this isn't working – AHMAD IRSHAD Dec 07 '21 at 18:35
when you console.log() the response, is it printing as expected? what status does it have? are you sure the status is not 201? since it's a POST – Gustavo Farias Dec 07 '21 at 18:38
My bad I was comparing res.status with 200 rather than 201 but when I compared it with 201 it worked – AHMAD IRSHAD Dec 07 '21 at 18:54
I thing more what can I do in order to handle errors – AHMAD IRSHAD Dec 07 '21 at 18:56
you mean, cover each specific error or a generic way of doing it, like use a toast saying that there was a problem with the operation? – Gustavo Farias Dec 07 '21 at 18:58
I mean cover each specific error – AHMAD IRSHAD Dec 07 '21 at 19:01
you could go with 2 different approaches, check response status and respond accordingly. eg: 500 would be a generic error, 422 unprocessable entity, 404 not found. or you could return a message from your server, like you do here ```if (userExist){return res.status(422).json({Error:"Email already registered"});```. And just print the message on your toast, eg: inside your catch block toast.error(err.data.Error) – Gustavo Farias Dec 07 '21 at 19:41
Got it. Thanks for your Time – AHMAD IRSHAD Dec 07 '21 at 20:24

how can I pass success or error message using react-toastify when using axios method

1 Answers1