CODEWITHSUNDEEP
reactjsaxiosreact-hook-form
Subrato Pattanaik
Subrato Pattanaik

Reputation: 6049

Checking E-Mail existence in the JSON server using React JS

I am creating a registration page using React JS. I have created a form that takes all the input from the user and stored this data to the JSON server using Axios. There is a field name as email name= "email" in the form and I want to check whether this email exists or not in the server while storing the whole form data. I am using a react-hook-form for this page.

Below are my users data in the db.json file.

{
 "users": [
    {
      "id": 1,
      "email": "[email protected]"
    },
    {
      "id": 2,
      "email": "[email protected]"
    }
  ]
}

The below code is for posting the form data to the JSON server and also checking the email existence but didn't work.

function LoginFile() {
  const { register, handleSubmit, errors } = useForm();

  const checkEmail = (getdata) => {
    console.log(getdata);
// need logic for checking email existence if exist stop posting and 
// else post the data to the server 
  };
  const onSubmit = (data) => {
    console.log(data);
    axios
      .get("http://localhost:4000/users")
      .then((res) => checkEmail(res.data));

    axios.post("http://localhost:4000/users", data).then((res) => {
      console.log(res.data);
    });
  };
return (
    <form onSubmit={handleSubmit(onSubmit)}>
      Email <input type="email" name="email" ref={register} />
      {errors.email && "Please enter email"}      
      <input type="submit" />
    </form>
  );
}
export default LoginFile;

How to check whether the email exists or not before posting it to the JSON Server?

Upvotes: 1

Views: 2272

Answers (2)

Aly Abd El Rahman
Aly Abd El Rahman

Reputation: 281

  const checkEmail = (serverUsers,formData) => {
   const user = serverUsers.find(user => user.email === formData.email); // extract the email from the formData
    if (user) return user;
  };
  const onSubmit = async (formData) => {
       
        const user = await axios
          .get("http://localhost:4000/users")
          .then((res) => checkEmail(res.data,formData));

        if (user) alert("email exists");  // do whatever you want here with the existence user store.
        else
         await axios.post("http://localhost:4000/users", data).then((res) => {
          console.log(res.data);
        });
      };

Upvotes: 1

Fahad Shinwari
Fahad Shinwari

Reputation: 968

You can go through these steps.

  1. First save your email data in a state.You have a functional component so useState will be good.

    const [Email, setEmail] = useState("")

  2. After setting up and saving your state value coming from the input.You can use an onChange function

    setEmail(e.target.value);

  3. You can hit up your handleSubmit function which will come back with all the user's data

     const handleSubmit = e => {
       e.preventDefault();
     axios
       .get("http://localhost:4000/users")
       .then((res) => checkEmail(res.data));
   };

  4. Now in checkEmail function use JavaScript Array includes() Method which will check for your email.If it exists will show an alert otherwise submits it.

    const checkEmail = (getdata) => {
     console.log(getdata);
     if(getdata.includes(Email)){
         alert("Cannot post because of duplicate Email")
     }else{
         axios.post("http://localhost:4000/users", data).then((res) => {
         console.log(res.data);
     });
     }
   };

Upvotes: 1

Related Questions