How to implement multiple checkbox using react hook

To manage the checked state of multiple checkboxes, we can use React's useState Hook. First, we need to define a state that is an object where the keys represent identifiers for each checkbox (e.g., id or name), and the values are booleans indicating whether the checkbox is selected.

Step 1: Define the State

Initialize the checkbox state using useState:

jsx
import React, { useState } from 'react';

function CheckboxGroup() {
    const [checkedState, setCheckedState] = useState({
        checkbox1: false,
        checkbox2: false,
        checkbox3: false
    });
}

Step 2: Create Checkbox Elements

Next, we create multiple checkboxes and use the state defined above to control the checked state of each checkbox:

jsx
return (
    <div>
        <label>
            <input
                type="checkbox"
                checked={checkedState.checkbox1}
                onChange={() => handleCheckboxChange('checkbox1')}
            /> Checkbox 1
        </label>
        <label>
            <input
                type="checkbox"
                checked={checkedState.checkbox2}
                onChange={() => handleCheckboxChange('checkbox2')}
            /> Checkbox 2
        </label>
        <label>
            <input
                type="checkbox"
                checked={checkedState.checkbox3}
                onChange={() => handleCheckboxChange('checkbox3')}
            /> Checkbox 3
        </label>
    </div>
);

Step 3: Handle State Changes

Finally, we need to define a function handleCheckboxChange to update the checked state of the checkbox. This function receives the checkbox identifier as a parameter and updates the state:

jsx
function handleCheckboxChange(id) {
    setCheckedState(prevState => ({
        ...prevState,
        [id]: !prevState[id]
    }));
}

Complete Component Example:

Combining all steps, we get the following React component:

jsx
import React, { useState } from 'react';

function CheckboxGroup() {
    const [checkedState, setCheckedState] = useState({
        checkbox1: false,
        checkbox2: false,
        checkbox3: false
    });

    function handleCheckboxChange(id) {
        setCheckedState(prevState => ({
            ...prevState,
            [id]: !prevState[id]
        }));
    }

    return (
        <div>
            <label>
                <input
                    type="checkbox"
                    checked={checkedState.checkbox1}
                    onChange={() => handleCheckboxChange('checkbox1')}
                /> Checkbox 1
            </label>
            <label>
                <input
                    type="checkbox"
                    checked={checkedState.checkbox2}
                    onChange={() => handleCheckboxChange('checkbox2')}
                /> Checkbox 2
            </label>
            <label>
                <input
                    type="checkbox"
                    checked={checkedState.checkbox3}
                    onChange={() => handleCheckboxChange('checkbox3')}
                /> Checkbox 3
            </label>
        </div>
    );
}

export default CheckboxGroup;

This component manages the checked state of three checkboxes and dynamically updates the state based on user interactions. This is a simple and effective way to manage the checked state of multiple checkboxes using React Hooks.