Skip to main content

[React] React form

In this article, we will try to build a simple sign-up form with React, and learn about how to use useState hook to handle state.

UI​

First, let's create a form in a function component

const SignUpForm = () => {
    ...
    return (
    <div>
      <h1>Sign up with your email and password</h1>
      <form>
        <label>
          Display Name
          <input
            tyep="text"
            required
            name="displayName"
            value="displayName"
          />
        </label>
        <label>
          Email
          <input
            type="email"
            required
            name="email"
            value="email"
          />
        </label>
        <label>
          Password
          <input
            type="password"
            required
            name="password"
            value="password"
          />
        </label>
        <label>
          Confirm Password
          <input
            type="password"
            required
            name="confirmPassword"
            value="password"
          />
        </label>
        <button type="submit">Sign up</button>
      </form>
    </div>
    )
}

We create a form element. Inside of it, we make 4 label tag, each of them have an input, respectively is Display Name, Email, Password, and Confirm Password, given semantic default value.

useState​

Then, we use the useState to handle the value, useState hook contains a state and a setter function, we can change the value of input tag with the state to keep track of. For the input onChange attrs, we use the setter function to set the new value to the state. Because we have four input, so we could define the default state as an object

const defaultFormFields = {
  displayName: "",
  email: "",
  password: "",
  confirmPassword: "",
};

// use defaultFormFields as default state, setFormFields is setter function
const [formFields, setFormFields] = useState(defaultFormFields);

// input
<input
  type="text"
  required
  onChange={handleChange}
  name="displayName"
  value={displayName}
/>;

Let's take a deeper look at handleChange function, as the input field changing, it will triger an event, we destructure the name and value inside event.target to name and value. Then, as one input field being changed, we can know by name which input field is changing, in setFormFields, we keep the current state of formFields, and specify the object's index with the same name to update the new value.

const handleChange = (event) => {
  const { name, value } = event.target;
  setFormFields({ ...formFields, [name]: value });
};

Submit​

Last but not least, every form needs to be submitted, we add basic handleSubmit function in form element. For more usage, you can change the handleSubmit based on your needs. For example, we already keep the input value in formFields, we can destructure them as below. Then, in handleSubmit, we can pass the state to back-end and trigger sign-up process, but we doesn't cover that more here.

const { displayName, email, password, confirmPassword } = formFields;

const handleSubmit = async (event) => {
  event.preventDefault();
};

<form onSubmit={handleSubmit}>...</form>;

Conclusion​

In conclusion, we learned useState hook to save the input value as state, and handle the changing state. What's clever way to store the form input state is to create an object, and every input has its specific name for the future update. The last part, submitting the form with the state help us to transfer the data to backend and trigger the sign-up process.

Reference​