Mastering Form Handling in React: A Deep Dive

Accessibility First

Before we dive into form handling techniques, remember to make your forms accessible to all users. Add labels to inputs, set correct aria-tags for invalid inputs, and structure content semantically correctly. This ensures your form is usable by everyone, including those who require assistive technologies.

The useState Hook

Let’s start with the basic approach: using the useState Hook to handle form state. We create separate pieces of state for each field, updating them individually. This method works well for simple forms but can become tedious for larger ones.

import { useState } from 'react';

const MyForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Name:', name);
    console.log('Email:', email);
  };

  return (

  );
};

Custom Hooks to the Rescue

To simplify our workflow, we can create a custom Hook called useFormField. This Hook creates a change event handler and keeps the value in state. By spreading the result of the Hook onto any field, we can handle form state with ease.

import { useState } from 'react';

const useFormField = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return { value, onChange: handleChange };
};

Handling Multiple Fields

As forms grow, using multiple instances of the custom Hook can become cumbersome. Instead, we can create a useFormFields Hook that holds all form state in one place. This approach scales well for larger forms and keeps our code organized.

import { useState } from 'react';

const useFormFields = (initialValues) => {
  const [values, setValues] = useState(initialValues);

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

  return { values, onChange: handleChange };
};

Leveraging the Browser’s Power

Did you know that the browser can handle form state internally? By leveraging this feature, we can simplify our code and reduce the need for explicit state handling. We can use the FormData API to get field values from our input fields, making our code more concise.

const MyForm = () => {
  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    console.log(formData.get('name'));
    console.log(formData.get('email'));
  };

  return (

  );
};

When to Use What

So, when should you use each approach? For simple forms with minimal validation, leveraging the browser’s built-in form state handling is a great option. However, when you need custom validation or access to form data before submission, handling state explicitly with controlled components is the way to go.