флажок reactjs проверяет все параметры

Question

Я использую флажок material-ui, который использует состояние. Когда я нажимаю, чтобы выбрать опцию, он выбирает все, но я бы хотел, чтобы он выбрал только ту, на которую нажали.

код:

export default function Categorys() {
  const [state, setState] = React.useState({
    checkedG: true
  });

  const handleChange = event => {
    setState({ ...state, [event.target.name]: event.target.checked });
  };
  return (
    <>
      {categorys.map(category => (
        <FormControlLabel
          key={category.id}
          control={
            <GreenCheckbox
              checked={state.checkedG}
              onChange={handleChange}
              name="checkedG"
              key={category.id}
            />
          }
          label={category.name}
        />
      ))}
    </>
  );
}

Answer 1

Потому что все они имеют одинаковый проверенный атрибут. Измените его на:

export default function Categorys() {
  const [state, setState] = React.useState({});

  const handleChange = event => {
    setState(prevState => { ...prevState, [event.target.name]: event.target.checked });
  };
  return (
    <>
      {categorys.map(category => (
        <FormControlLabel
          key={category.id}
          control={
            <GreenCheckbox
              checked={state[category.id]}
              onChange={handleChange}
              name={category.id}
              key={category.id}
            />
          }
          label={category.name}
        />
      ))}
    </>
  );
}