CODEWITHSUNDEEP
reactjsreact-hooks
soccerway
soccerway

Reputation: 11931

Form values coming as blank on submit

Not able to pick the values of email and token from the below form. It is displaying as blank during on click on submit. Can anyone please advise where I am doing wrong ?

https://codesandbox.io/s/dazzling-kirch-1gqq4?file=/src/App.js

import React, { useRef, useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import Axios from "axios";

const CreateLink = () => {
  const [email, setEmail] = useState("");
  const [token, setToken] = useState("");
  const {
    handleSubmit,
    register,
    formState: { errors }
  } = useForm();

  const onSubmit = (e) => {
    e.preventDefault();
    alert(`Sending Email ${email}`);
    const fetchData = async () => {
      try {
        const res = await Axios.post(
          "http://localhost:8000/service/createlink",
          email,
          token
        );
        if (res.data.success) {
          console.log("Link token created:" + res.data.success);
        }
      } catch (e) {
        console.log(e);
      }
    };
    fetchData();
  };

  return (
    <div className="App">
      <h1>Create Link</h1>
      <form onSubmit={handleSubmit(onSubmit)} className="linkForm inputForm">
        <div className="inputField">
          <input
            name="email"
            placeholder="email"
            type="text"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            {...register("email", {
              required: "Email is required",
              pattern: {
                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                message: "Invalid email address"
              }
            })}
          />
          <span className="loginErrorTextFormat">
            {errors.email && <p>{errors.email.message}</p>}
          </span>
        </div>
        <div className="inputField">
          <input
            placeholder="token"
            name="token"
            type="text"
            value={token}
            onChange={(e) => setToken(e.target.value)}
            {...register("token", {
              required: "Token is required"
            })}
          />
          <span className="loginErrorTextFormat">
            {errors.token && <p>Input is not valid</p>}
          </span>
        </div>
        <input type="submit" />
      </form>
    </div>
  );
};

export default CreateLink;

Upvotes: 0

Views: 31

Answers (1)

Viet
Viet

Reputation: 12777

Because register return an object has property onChange. So it override your onChange, you just need move onChange after register

    {...register("token", {
      required: "Token is required"
    })}
    onChange={(e) => setToken(e.target.value)}

Upvotes: 1

Related Questions