How to show error on duplicate email in reactJs?

Question

I have a MERN project. I have a form data. i want to insert in my database. Data is successfully inserted but I want to check duplicate email from my database and show error on reactjs page(like react toastify)

basically i want to show some error to user

so how to fetch email from backend and show some result in reactjs.

As there are some same questions but it would't help me

So please give me some suggestions how can i do it?

register.js

const Register = () => {
  const [newUser, setNewUser] = useState({
    identity: "",
    names: "",
    phone: "",
    email: "",
    city: "",
    address: "",
    subject: "",
    classes: "",
    message: "",
  });

  

  const handleSubmit = (e) => {
    e.preventDefault();
    axios({
      method: "post",
      url: "/register",
      data: JSON.stringify(newUser),
      headers: { "Content-Type": "application/json" },
    }).then((response) => {
        toast.dark(`${newUser.names} 🤵 registered Sucessfully `, {
          position: "top-center",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          });
      })
      .then((data) => {
        console.log(data);
      })
      .catch((error) => {
        
        if (error.response) {
          console.log(error.response.data);
        }
      });
  };

  const handleChange = (e) => {
    setNewUser({ ...newUser, [e.target.name]: e.target.value });
  };

router.post("/register", async (req, res) => { const { identity, names, phone, email, city, address, subject, classes, message } = req.body

// if (!identity || !names || !phone || !email || !city || !address || !subject || !classes || !message) {
//     return res.status(422).json({ error: "Please mark all the field" })
// }

try {

    const userExit = await User.findOne({ email: email })
    if (userExit) {
        // res.status(422).json({ error: "Email already exit" })
        alert("email already exit")
        
    }
    // else if (password != cpassword) {
    //     return res.status(422).json({ error: "password and confirm password don not match" })
    // }
   
        const user = new User({identity ,names,  phone,email,city,address, subject, classes, message })
        await user.save()
        res.status(201).json({ message: "user registered successfulluy" })
      
    
    
} catch (err) {
    console.log(err)
}

})

auth.js

router.post("/register", async (req, res) => {
    const { identity, names, phone, email, city, address, subject, classes, message } = req.body
    

    try {

        const userExit = await User.findOne({ email: email })
        if (userExit) {
            // res.status(422).json({ error: "Email already exit" })
            alert("email already exit")
            
            const user = new User({identity ,names,  phone,email,city,address, subject, classes, message })
            await user.save()
            res.status(201).json({ message: "user registered successfulluy" })
          
        
        
    } catch (err) {
        console.log(err)
    }

})

MrCeRaYA · Accepted Answer · 2021-10-31 14:56:31Z

1

You could use the error handler. You are already checking if the user exists. But instead of sending a 201 code, send an error code (400 suggested), which will trigger the error catcher (.catch()) in your frontend. There you can check if the status is 400 through error.response.status and toggle a popup component to display an error message.

Backend:

router.post("/register", async (req, res) => {
const { identity, names, phone, email, city, address, subject, classes, message } = req.body


try {
    const userExists = await User.findOne({ email: email })
    if (userExists) return res.status(400).json({ error: "Email already exit" });
        
    const user = new User({identity ,names,  phone,email,city,address, subject, classes, message });
    await user.save();
    res.status(201).json({ message: "user registered successfully" });        
} catch (err) {
    // Your server error handling...
    console.log(err)
}

Frontend:

 const handleSubmit = (e) => {
    e.preventDefault();
    axios({
      method: "post",
      url: "/register",
      data: JSON.stringify(newUser),
      headers: { "Content-Type": "application/json" },
    }).then((response) => {
        toast.dark(`${newUser.names} 🤵 registered Sucessfully `, {
          position: "top-center",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          });
      })
      .then((data) => {
        console.log(data);
      })
      .catch((error) => {
        if (error.response.status === 400) {
          // This line is for toggling the popup component
          shouldShowErrorMessage(true);
          console.log(error.response.data);
        }
      });
  };

edited Oct 31, 2021 at 14:56

answered Oct 31, 2021 at 13:23

MrCeRaYA

6535 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user14110207 Over a year ago

can you please show how to do it...i have tried but god knows what is coming!!!

MrCeRaYA Over a year ago

@anitaSingh added

user14110207 Over a year ago

showing 'shouldShowErrorMessage' is not defined.

nima Over a year ago

it is a handler function to toggle between error and non error status, you should define it @anitaSingh

MrCeRaYA Over a year ago

as @nima said, its a handler that you should define yourself to hide/show a component. Usually we use useState for it. @anitaSingh

Collectives™ on Stack Overflow

How to show error on duplicate email in reactJs?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related