How to Handle Forms in React

Forms are a critical part of web applications, enabling user interaction through data submission. When building applications with React, managing form state and behavior can be quite different compared to traditional HTML forms. In this post, we’ll cover how to effectively handle forms in React, utilizing controlled and uncontrolled components, validation techniques, and some popular libraries that can simplify the process.

Understanding Controlled vs Uncontrolled Components

In React, forms can be broadly classified into two types based on how they handle input data: controlled components and uncontrolled components.

Controlled Components

In controlled components, form data is handled by the state within the React component. This means that the input values are tied directly to the component’s state, ensuring a single source of truth. Let’s see an example:

import React, { useState } from 'react';

const ControlledForm = () => {
    const [inputValue, setInputValue] = useState('');

    const handleChange = (e) => {
        setInputValue(e.target.value);
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        alert(`Submitted: ${inputValue}`);
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>Input:</label>
            <input 
                type="text" 
                value={inputValue} 
                onChange={handleChange} 
            />
            <button type="submit">Submit</button>
        </form>
    );
};

export default ControlledForm;

In this example:

• We defined a state variable inputValue using useState.
• The handleChange function updates the component’s state whenever the input changes.
• The handleSubmit function prevents the default form submission behavior and presents an alert with the current input value.

Uncontrolled Components

Uncontrolled components work similarly to traditional HTML forms, where form data is managed by the DOM rather than the component’s state. React can access the form values using refs. Here’s an example of an uncontrolled component:

import React, { useRef } from 'react';

const UncontrolledForm = () => {
    const inputRef = useRef(null);

    const handleSubmit = (e) => {
        e.preventDefault();
        alert(`Submitted: ${inputRef.current.value}`);
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>Input:</label>
            <input type="text" ref={inputRef} />
            <button type="submit">Submit</button>
        </form>
    );
};

export default UncontrolledForm;

In this example:

• We use useRef to create a reference to the input element.
• The value is accessed directly from the DOM whenever the form is submitted.

Handling Multiple Inputs

When dealing with forms that contain multiple input fields, managing state might seem complex. However, you can maintain a single state object for the form and update it using the input’s name as the key. Here’s an example:

import React, { useState } from 'react';

const MultiInputForm = () => {
    const [formData, setFormData] = useState({
        username: '',
        email: '',
    });

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData((prevData) => ({
            ...prevData,
            [name]: value,
        }));
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        alert(`Submitted: ${JSON.stringify(formData)}`);
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>Username:</label>
            <input 
                type="text" 
                name="username" 
                value={formData.username} 
                onChange={handleChange} 
            />
            <label>Email:</label>
            <input 
                type="email" 
                name="email" 
                value={formData.email} 
                onChange={handleChange} 
            />
            <button type="submit">Submit</button>
        </form>
    );
};

export default MultiInputForm;

In this scenario:

• The form state is maintained in a single object formData.
• The handleChange function updates the respective field based on its name.

Form Validation Techniques

Validation is crucial to ensure the data submitted by users is correct. In React, validation can be implemented at various levels, either using built-in techniques or leveraging libraries.

Client-side Validation

You can perform validation checks before submission by adding logic in the handleSubmit method:

const handleSubmit = (e) => {
    e.preventDefault();
    if (!formData.username || !formData.email) {
        alert("All fields are required!");
        return;
    }
    alert(`Submitted: ${JSON.stringify(formData)}`);
};

This simple validation checks if the fields are filled in before submitting.

Using Libraries for Validation

For more complex validation, libraries such as Formik and Yup can significantly reduce the boilerplate code. Formik manages the form state and handles submissions, while Yup provides a validation schema:

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

const validationSchema = Yup.object({
    username: Yup.string().required('Required'),
    email: Yup.string().email('Invalid email format').required('Required'),
});

const FormikExample = () => (
    <Formik
        initialValues={{ username: '', email: '' }}
        validationSchema={validationSchema}
        onSubmit={(values) => {
            alert(`Submitted: ${JSON.stringify(values)}`);
        }}
    >
        <Form>
            <label>Username:</label>
            <Field name="username" />
            <ErrorMessage name="username" component="div" style={{color: 'red'}} />

            <label>Email:</label>
            <Field name="email" type="email" />
            <ErrorMessage name="email" component="div" style={{color: 'red'}} />

            <button type="submit">Submit</button>
        </Form>
    </Formik>
);

export default FormikExample;

In this example:

• We define a validation schema using Yup to ensure the fields are filled and the email is in the correct format.
• Formik handles form state, field management, and error messages seamlessly.

Custom Hooks for Form Management

To encapsulate form logic and avoid repetition, you can create custom hooks. Here’s a simple example of a custom hook to manage form state:

import { useState } from 'react';

const useForm = (initialValues) => {
    const [formData, setFormData] = useState(initialValues);

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData((prevData) => ({
            ...prevData,
            [name]: value,
        }));
    };

    const resetForm = () => setFormData(initialValues);

    return {
        formData,
        handleChange,
        resetForm,
    };
};

export default useForm;

This custom hook can be used in any form component to manage its state and behavior, improving code reusability.

Conclusion

Handling forms in React efficiently requires understanding the distinctions between controlled and uncontrolled components, employing validation techniques, and leveraging libraries or hooks to streamline the process. Whether you are creating simple forms or complex user inputs, these strategies provide a robust foundation for React form handling. As you become comfortable with these practices, consider integrating more advanced solutions to enhance the user experience further.

For more insights and practical guidance on React forms, keep exploring the documentation and community resources!