mercredi 18 août 2021

How to use array of boolean object in useState to handle same item in group

I'm a newbie of ReactJS, I was mess around with this function. Here I'm got 3 group of checkbox so I wanna when I checked/unchecked 1st box (2nd,3rd) of group checkbox then it's same effected like this :https://www.loom.com/share/35506f4234a649a9b98213dd0430bf9e

I'm so grateful with every idea which community give me, tks you all

    export const Vertical: ComponentStory<typeof EdsFormCheckbox> = () => {
      const [isChecked, setChecked] = useState({checkOne:false,checkTwo: false,checkThree: false});
      const handleClick = (e: ChangeEvent<HTMLInputElement>) => setChecked(isChecked.checkOne);

  return (
    <div>
      <EdsCheckboxGroup
        onChange={handleClick}
        name="standard"
        labelText="Standard"
        className="gap-300"
      >
        <EdsFormCheckbox  checked={isChecked.checkOne} labelText="Math"></EdsFormCheckbox>
        <EdsFormCheckbox  checked={isChecked.checkTwo} labelText="Science"></EdsFormCheckbox>
        <EdsFormCheckbox  checked={isChecked.checkThree} labelText="English"></EdsFormCheckbox>
      </EdsCheckboxGroup>

      <EdsCheckboxGroup
        onChange={handleClick}
        name="required"
        labelText="Required"
        className="gap-300"
      >
        <EdsFormCheckbox checked={isChecked.checkOne} labelText="Math" isRequired></EdsFormCheckbox>
        <EdsFormCheckbox checked={isChecked.checkTwo} labelText="Science" isRequired></EdsFormCheckbox>
        <EdsFormCheckbox checked={isChecked.checkThree}  labelText="English" isRequired></EdsFormCheckbox>
      </EdsCheckboxGroup>

      <EdsCheckboxGroup
        onChange={handleClick}
        name="disable"
        labelText="Disable"
        className="gap-300"
      >
        <EdsFormCheckbox checked={isChecked.checkOne} labelText="Math" isDisabled></EdsFormCheckbox>
        <EdsFormCheckbox checked={isChecked.checkTwo} labelText="Science" isDisabled></EdsFormCheckbox>
        <EdsFormCheckbox checked={isChecked.checkThree} labelText="English" isDisabled></EdsFormCheckbox>
      </EdsCheckboxGroup>



Aucun commentaire:

Enregistrer un commentaire