DonaldoLR/react-hooks-forms-abstraction

BONUS: React Forms Abstraction

Objectives

1. Make our form logic more reusable by creating a dynamic onChange event handler

Code Along

If you want to code along there is starter code in the src folder. Make sure to run npm install && npm start to see the code in the browser.

Form State

Let's talk about the onChange event we've got set up now in initial version of our Form component. If we look at the original code:

import React, { useState } from "react";

function Form() {
  const [firstName, setFirstName] = useState("John");
  const [lastName, setLastName] = useState("Henry");

  function handleFirstNameChange(event) {
    setFirstName(event.target.value);
  }

  function handleLastNameChange(event) {
    setLastName(event.target.value);
  }

  return (
    <form>
      <input type="text" onChange={handleFirstNameChange} value={firstName} />
      <input type="text" onChange={handleLastNameChange} value={lastName} />
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

We can imagine that adding more input fields to this form is going to get repetitive pretty fast. For every new input field, we'd need to add:

• a new state variable by calling useState() to hold the value of that input
• a new handleChange function to update that piece of state

As a first refactor, let's use useState just once, and make an object representing all of our input fields:

function Form() {
  const [formData, setFormData] = useState({
    firstName: "John",
    lastName: "Henry",
  });

  function handleFirstNameChange(event) {
    setFormData({
      ...formData,
      firstName: event.target.value,
    });
  }

  function handleLastNameChange(event) {
    setFormData({
      ...formData,
      lastName: event.target.value,
    });
  }

  return (
    <form>
      <input
        type="text"
        onChange={handleFirstNameChange}
        value={formData.firstName}
      />
      <input
        type="text"
        onChange={handleLastNameChange}
        value={formData.lastName}
      />
    </form>
  );
}

Since our initial state is an object, we have to copy all the key/value pairs from the current version of that object into our new state — that's what this spread operator here is doing:

setFormData({
  // formData is an object, so we need to copy all the key/value pairs
  ...formData,
  // we want to overwrite the lastName key with a new value
  lastName: event.target.value,
});

Now, we just have one object in state to update whenever a the input field changes. Our change handlers are still a bit verbose, however. Since each one is changing a different value in our state, we've got them separated here. You can imagine that once we've got a more complicated form, this route may result in a very cluttered component. Instead of separate methods, we could actually condense this down into one abstracted component. Since event is being passed in as the argument, we have access to some of the event.target attributes that may be present.

If we give our inputs name attributes, we can access them as event.target.name:

<input
  type="text"
  name="firstName"
  value={formData.firstName}
  onChange={handleFirstNameChange}
/>
<input
  type="text"
  name="lastName"
  value={formData.lastName}
  onChange={handleLastNameChange}
/>

If we make sure the name attributes of our <input> fields match keys in our state, we can write a generic handleChange function like so:

function handleChange(event) {
  // name is the KEY in of the formData object we're trying to update
  const name = event.target.name;
  const value = event.target.value;

  setFormData({
    ...formData,
    [name]: value,
  });
}

If we connect this method to both of our inputs, they will both correctly update state. Why? Because for the first input, event.target.name is set to firstName, while in the second input, it is set to lastName. Each input's name attribute will change which part of state is actually updated!

Now, if we want to add a new input field to the form, we just need to add two things:

• a new key in our formData state, and
• a new <input> field where the name attribute matches our new key

We can take it one step further, and also handle checkbox inputs in our handleChange input. Since checkboxes have a checked attribute instead of the value attribute, here's what we'd need to check what type our input is in order to get the correct value in state.

Here's what the final version of our Form component looks like:

import React, { useState } from "react";

function Form() {
  const [formData, setFormData] = useState({
    firstName: "John",
    lastName: "Henry",
    admin: false,
  });

  function handleChange(event) {
    const name = event.target.name;
    let value = event.target.value;

    // use `checked` property of checkboxes instead of `value`
    if (event.target.type === "checkbox") {
      value = event.target.checked;
    }

    setFormData({
      ...formData,
      [name]: value,
    });
  }

  function handleSubmit(event) {
    event.preventDefault();
    console.log(formData);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="firstName"
        onChange={handleChange}
        value={formData.firstName}
      />
      <input
        type="text"
        name="lastName"
        onChange={handleChange}
        value={formData.lastName}
      />
      <input
        type="checkbox"
        name="admin"
        onChange={handleChange}
        checked={formData.admin}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Depending on what input elements you're working with, you might also have to add some additional logic to handle things like number fields (using parseInt or parseFloat) and other data types to ensure your form state is always in sync with your components.

If you're using a lot of forms in your application, it's worth checking out some nice React libraries like react hook form to handle some of this abstraction as well as adding custom client-side validation to your forms.

Resources

• React Forms