Stop Struggling with Forms in React - 4 Smart Ways to Handle Them

#webdev #beginners #javascript #react

Forms are an essential part of any web application. In React, there are several ways to manage forms, from manual control to powerful libraries. In this article, we’ll explore four popular methods to handle forms in React, with practical examples for each.

1. Controlled Forms with React

React uses "controlled" inputs, where the input value is stored in the state.

import React, { useState } from 'react';

function BasicForm() {
  const [form, setForm] = useState({ name: '', email: '' });

  function handleChange(e) {
    setForm({ ...form, [e.target.name]: e.target.value });
  }

  function handleSubmit(e) {
    e.preventDefault();
    console.log(form);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input placeholder="TCHACA" name="name" value={form.name} onChange={handleChange}  />
      <input placeholder="[email protected]" name="email" value={form.email} onChange={handleChange}  />
      <button type="submit">Submit</button>
    </form>
  );
}

Highlights:

Uses event.target.name for multiple inputs.
Inputs are 100% controlled by state.

2. Formik

Formik is a popular library that allows you to handle forms in a declarative way.

import { Formik, Form, Field } from 'formik';

function FormikForm() {
  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      onSubmit={(values) => console.log(values)}
    >
      <Form>
        <Field name="name" placeholder="Name" />
        <Field name="email" placeholder="Email" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

Highlights:

Less boilerplate.
Easy integration with validation tools.

3. Formik + Yup

Yup lets you define validation rules declaratively and works seamlessly with Formik.

import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const schema = Yup.object().shape({
  name: Yup.string().required('Name is required'),
  email: Yup.string().email('Invalid email').required('Email is required'),
});

function ValidatedForm() {
  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      validationSchema={schema}
      onSubmit={(values) => console.log(values)}
    >
      <Form>
        <Field name="name" placeholder="Name" />
        <ErrorMessage name="name" component="div" />
        <Field name="email" placeholder="Email" />
        <ErrorMessage name="email" component="div" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

Highlights:

Powerful and reusable validation.
Instant feedback to users.
More examples here

See this live:

4. React Hook Form

A lightweight and performant alternative with built-in validation support.

import { useForm } from 'react-hook-form';

function RHFForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  function onSubmit(data) {
    console.log(data);
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name', { required: 'Name is required' })} placeholder="Name" />
      {errors.name && <span>{errors.name.message}</span>}

      <input {...register('email', { required: 'Email is required' })} placeholder="Email" />
      {errors.email && <span>{errors.email.message}</span>}

      <button type="submit">Submit</button>
    </form>
  );
}

Highlights:

Better performance for large forms.
Less code and more focus on productivity.

Conclusion

These four approaches range from basic to advanced and cover the most common use cases for handling forms in React. Choose the one that best fits your project's needs.

Useful Resources:

Top comments (10)

Dotallio • May 28

Great breakdown! React Hook Form made big forms so much easier for me, especially with those built-in validations - do you have a go-to for dynamic field arrays?