Checkboxes with react and MUI-CodePudding

I have 2 checkboxes, at the moment when one is selected both of when select. I want to be able to select one or both or none. I am not sure why the are both being selected at the same time.

These are my checkboxes

 ``` <FormControlLabel
      control={<Checkbox checked={checked} onChange={handleChange} color="primary"    />}
      label="Domain DNC file (Check if no list is required)"
    /> 

    <FormControlLabel
      control={<Checkbox checked={checked} onChange={handleChange} color="primary"    />}
      label="Email DNC file (Check if no list is required)"
    />



This is my onChange:

         const handleChange = (event) => {
          setChecked(event.target.checked);
         };


And this is my state:

    const [checked, setChecked] = React.useState(true);

CodePudding user response：

You are using only one state checked which is either true or false. when you check one of the checkboxes it's going to execute handleChange which just changes the state from true to false or the opposite. that's why they are selected both or unselected both.

solution : store the state of each one of them in an object

here is an example in your case :

function App() {
  const [DNC, setDNC] = React.useState({
    Domain: false,
    Email: false
  });

  const { Domain, Email } = DNC;

  const handleChange = (event) => {
    setDNC({ ...DNC, [event.target.name]: event.target.checked });
  };
  console.log(DNC);

  return (
    <div>
      <FormControlLabel
        control={
          <Checkbox checked={Domain} onChange={handleChange} name="Domain" />
        }
        label="Domain 1 DNC file (Check if no list is required)"
      />
      <FormControlLabel
        control={
          <Checkbox checked={Email} onChange={handleChange} name="Email" />
        }
        label="Email DNC file (Check if no list is required)"
      />
    </div>
  );
}

another Solution : use two states one for checkedEmail and another one for checkedDomain and each state is handled by an onChange function. like this

function App() {
  const [checkedDomain, setCheckedDomain] = React.useState(true);
  const [checkedEmail, setCheckedEmail] = React.useState(true);
  const handleChangeDomain = (event) => {
    setCheckedDomain(event.target.checked);
  };

  const handleChangeEmail = (event) => {
    setCheckedEmail(event.target.checked);
  };
  return (
    <div>
      <FormControlLabel
        control={
          <Checkbox
            checked={checkedDomain}
            onChange={handleChangeDomain}
            color="primary"
          />
        }
        label="Domain DNC file (Check if no list is required)"
      />

      <FormControlLabel
        control={
          <Checkbox
            checked={checkedEmail}
            onChange={handleChangeEmail}
            color="primary"
          />
        }
        label="Email DNC file (Check if no list is required)"
      />
    </div>
  );
}
export default App;

CodePudding user response：

If I understood your question properly, your set up look something like this:

const [checked, setChecked] = React.useState(true);

const handleChange = (event) => {
    setChecked(event.target.checked);
};
...
<Checkbox checked={checked} onChange={handleChange} color="primary"    />
<Checkbox checked={checked} onChange={handleChange} color="primary"    />
...

The issue you are having is that you've got only a single state called checked. Checked is either true, or it is false. And you are passing it into both checkboxes. Similarly, you have only one change handler that toggles checked to true or false. And you are passing the same change handler into both check boxes. So when either is toggled, both are toggled.

What you need to do is have two useStates and two change handlers:

const [checked1, setChecked1] = React.useState(true);
const [checked2, setChecked2] = React.useState(true);


const handleChange1 = (event) => {
    setChecked1(event.target.checked);
};
const handleChange2 = (event) => {
    setChecked2(event.target.checked);
};
...
<Checkbox checked={checked1} onChange={handleChange1} color="primary"    />
<Checkbox checked={checked2} onChange={handleChange2} color="primary"    />
...