Handle Change in React Forms¶

This guide covers how to handle form data changes in React, specifically treating checkboxes differently while managing other input types with a simple state update.

1. Initialize Form State¶

Create a useState hook to manage form data, initializing with default values:

const [formData, setFormData] = useState({
    year: "",
    batches: [],
    questions: [],
});

2. Handle Input Changes¶

Create a handleChange function that updates the state based on user input:

Checkbox: If the checkbox is checked, add its name to the batches array. If unchecked, remove it.
Other Input Types: For text inputs and others, update the state with the new value for the given field.

const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    if (type === "checkbox") {
        setFormData((prevData) => ({
            ...prevData,
            batches: checked
                ? [...prevData.batches, name]
                : prevData.batches.filter((batchName) => batchName !== name),
        }));
    } else {
        setFormData((prevData) => ({
            ...prevData,
            [name]: value,
        }));
    }
};

This simple approach handles form state updates efficiently, with special handling for check-boxes.

3. Complete example (Given by chatGPT and not confirmed yet)¶

import React, { useState } from 'react';

const FormComponent = () => {
    const [formData, setFormData] = useState({
        name: "",
        age: "",
        acceptTerms: false,
        gender: "",
        favoriteColor: "",
    });

    const handleChange = (e) => {
        const { name, value, type, checked } = e.target;

        // Handle checkboxes
        if (type === "checkbox") {
            setFormData((prevData) => ({
                ...prevData,
                [name]: checked,
            }));
        }
        // Handle radio buttons
        else if (type === "radio") {
            setFormData((prevData) => ({
                ...prevData,
                [name]: value,
            }));
        }
        // Handle other input types (text, number, select, etc.)
        else {
            setFormData((prevData) => ({
                ...prevData,
                [name]: value,
            }));
        }
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(formData);  // Handle form submission (e.g., send data to an API)
    };

    return (
        <form onSubmit={handleSubmit}>
            {/* Text Input */}
            <label>
                Name:
                <input
                    type="text"
                    name="name"
                    value={formData.name}
                    onChange={handleChange}
                />
            </label>

            {/* Number Input */}
            <label>
                Age:
                <input
                    type="number"
                    name="age"
                    value={formData.age}
                    onChange={handleChange}
                />
            </label>

            {/* Checkbox */}
            <label>
                Accept Terms:
                <input
                    type="checkbox"
                    name="acceptTerms"
                    checked={formData.acceptTerms}
                    onChange={handleChange}
                />
            </label>

            {/* Radio Buttons */}
            <fieldset>
                <legend>Gender:</legend>
                <label>
                    Male
                    <input
                        type="radio"
                        name="gender"
                        value="male"
                        checked={formData.gender === "male"}
                        onChange={handleChange}
                    />
                </label>
                <label>
                    Female
                    <input
                        type="radio"
                        name="gender"
                        value="female"
                        checked={formData.gender === "female"}
                        onChange={handleChange}
                    />
                </label>
            </fieldset>

            {/* Select Dropdown */}
            <label>
                Favorite Color:
                <select
                    name="favoriteColor"
                    value={formData.favoriteColor}
                    onChange={handleChange}
                >
                    <option value="">-- Select Color --</option>
                    <option value="red">Red</option>
                    <option value="blue">Blue</option>
                    <option value="green">Green</option>
                </select>
            </label>

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

export default FormComponent;