如何在react中创建动态复选框

import React, { useState } from "react";

const CheckboxGroup = ({ data }) => {
    const [checkedValues, setCheckedValues] = useState([]);

    const handleChange = (event) => {
        const value = event.target.value;
        if (event.target.checked) {
            setCheckedValues([...checkedValues, value]);
        } else {
            setCheckedValues(checkedValues.filter((item) => item !== value));
        }
    };

    return (
        <div>
            {data.map((item) => (
                <label key={item.value}>
                    <input
                        type="checkbox"
                        value={item.value}
                        checked={checkedValues.includes(item.value)}
                        onChange={handleChange}
                    />
                    {item.label}
                </label>
            ))}
        </div>
    );
};

export default CheckboxGroup;

const App = () => {
    const checkboxData = [
        { value: "option1", label: "Option 1" },
        { value: "option2", label: "Option 2" },
        { value: "option3", label: "Option 3" },
    ];

    return <CheckboxGroup data={checkboxData} />;
};

export default App;