checkbox reactjs is checking all options

Question

I'm using a material-ui checkbox that uses state. When I click to select an option, it selects all, but I would like him to select only the one that was clicked.

code:

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}
        />
      ))}
    </>
  );
}

Domino987 · Accepted Answer · 2020-03-25 19:12:35Z

2

Because they all have the same checked attribute. Change it to:

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}
        />
      ))}
    </>
  );
}

edited Mar 25, 2020 at 19:12

answered Mar 25, 2020 at 18:59

Domino987

8,8642 gold badges17 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

checkbox reactjs is checking all options

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related