CODEWITHSUNDEEP
reactjs
Çağın Berke İspir
Çağın Berke İspir

Reputation: 39

Checkbox selecting

I am trying to make a quiz app. It will give you something based on your answers so I was looking for a code for checking the only one checkbox. Since I couldn't find it, I made it up like the code below. Is this an efficient way to use like this?

  const [isChecked1, setIsChecked1] = useState(false);
  const [isChecked2, setIsChecked2] = useState(false);
  const [isChecked3, setIsChecked3] = useState(false);
  const [isChecked4, setIsChecked4] = useState(false);
  const [isChecked5, setIsChecked5] = useState(false);
  const handleOnChange1 = () => {
    setIsChecked1(!isChecked1);
    setIsChecked2(false);
    setIsChecked3(false);
    setIsChecked4(false);
    setIsChecked5(false);
  };
  const handleOnChange2 = () => {
    setIsChecked2(!isChecked2);
    setIsChecked1(false);
    setIsChecked3(false);
    setIsChecked4(false);
    setIsChecked5(false);
  };
  const handleOnChange3 = () => {
    setIsChecked3(!isChecked3);
    setIsChecked2(false);
    setIsChecked1(false);
    setIsChecked4(false);
    setIsChecked5(false);
  };
  const handleOnChange4 = () => {
    setIsChecked4(!isChecked4);
    setIsChecked2(false);
    setIsChecked3(false);
    setIsChecked1(false);
    setIsChecked5(false);
  };
  const handleOnChange5 = () => {
    setIsChecked5(!isChecked5);
    setIsChecked2(false);
    setIsChecked3(false);
    setIsChecked4(false);
    setIsChecked1(false);
  };
  return (
    <div>
      <form>
        <input
          type="checkbox"
          checked={isChecked1}
          onChange={handleOnChange1}
        />
        <input
          type="checkbox"
          checked={isChecked2}
          onChange={handleOnChange2}
        />
        <input
          type="checkbox"
          checked={isChecked3}
          onChange={handleOnChange3}
        />
        <input
          type="checkbox"
          checked={isChecked4}
          onChange={handleOnChange4}
        />
        <input
          type="checkbox"
          checked={isChecked5}
          onChange={handleOnChange5}
        />
      </form>
    </div>
  );
}

.................................................................................... .................................................................................... ....................................................................................

Upvotes: 0

Views: 47

Answers (1)

Sowmen Rahman
Sowmen Rahman

Reputation: 373

State for multiple checkboxes in cases like yours can be managed better with map state variables and dispatch functions. You initialize your state as an object with labels for each checkbox as keys like this:

const [checked, setChecked] = useState({
  cb1: false,
  cb2: false,
  cb3: false,
  cb4: false,
  cb5: false
})

For each checkbox call the dispatchChange function with the target label for each checkbox's onChange handler which will toggle the current value of the target checkbox, like this:

const dispatchChange = (checkboxLabel) => {
  const previousState = checked[checkboxLabel];
  setChecked({...checked, checkboxLabel: !previousState});
}

Now, for each checkbox type input you have, you modify the onChange handler to this:

<input
   type="checkbox"
   checked={checked["cb1"]}
   onChange={() => dispatchChange("cb1")}
/>
<input
   type="checkbox"
   checked={checked["cb2"]}
   onChange={() => dispatchChange("cb2")}
/>
<input
   type="checkbox"
   checked={checked["cb3"]}
   onChange={() => dispatchChange("cb3")}
/>
...
...
...

This will create a new state object with only the checkbox tagged with dispatch label checkboxLabel toggled to the new value, by copying all the key-value pairs from the old checked state object and overwriting the key-value pair for the checkbox that was toggled.

Upvotes: 2

Related Questions