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

Question

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?

Subrato Pattanaik · Accepted Answer · 2020-10-10 12:23:08Z

1

  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);
        });
      };

edited Oct 10, 2020 at 12:23

Subrato Pattanaik

6,1398 gold badges28 silver badges61 bronze badges

answered Oct 10, 2020 at 11:29

Aly Abd El Rahman

2811 silver badge6 bronze badges

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

Comments

Fahad Shinwari · Accepted Answer · 2020-10-10 11:59:43Z

1

You can go through these steps.

First save your email data in a state.You have a functional component so useState will be good.
```
const [Email, setEmail] = useState("")
```
After setting up and saving your state value coming from the input.You can use an onChange function
```
setEmail(e.target.value);
```

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));
   };

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);
     });
     }
   };

answered Oct 10, 2020 at 11:59

Fahad Shinwari

9668 silver badges7 bronze badges

1 Comment

Fahad Shinwari Over a year ago

Welcome brother

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related