CODEWITHSUNDEEP
reactjstypescriptcheckboxmaterial-ui
Jennifer De Goede
Jennifer De Goede

Reputation: 459

Checkboxes with React and MUI

I have 2 checkboxes, at the moment when one is selected both of when selected. I want to be able to select one or both or none. I am not sure why they 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);

Upvotes: 1

Views: 10676

Answers (2)

monim
monim

Reputation: 4383

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;

Upvotes: 4

davidx1
davidx1

Reputation: 3673

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"    />
...

Upvotes: 0

Related Questions