Click on checkbox is not checking checkbox instantly

Question

when I click in the checkbox of the table row, I am updating the array selecteddata with id and after that I am passing the checked value by finding whether id exists in the selecteddata to check the checkbox. I am able to store the id in selectedData but it is not showing instance changes in checkbox.

const [selectedData, setSeletcedData] = useState([]);

  const handleCheckboxSelect = (id) => {
    setHasSelectedAll(false);
    setSeletcedData((selectedData) => {
      if (selectedData.includes(id)) {
        return selectedData.filter((currentId) => id !== currentId);
      } else {
        selectedData.push(id);
        return selectedData;
      }
    });
  };



<CDataTable
          items={matter}
          fields={fields}
          hover
          pagination
            count: (item) => (
              <CFormGroup variant="checkbox" className="checkbox">
                <CInputCheckbox
                  id="checkbox1"
                  name="checkbox1"
                  value="option1"
                  checked={selectedData.includes(item.id)}
                  onChange={(e) => handleCheckboxSelect(item.id)}
                />
              </CFormGroup>
            ),
          }}
        />

majdsalloum · Accepted Answer · 2021-07-14 10:56:54Z

1

You're returning the same array reference in the line

selectedData.push(id);
return selectedData;

which won't cause the component to re-render, you should return a new array with the new item with, using spread operator or Array Cloning

spread operator :

     return [...selectedData,id];

Cloning :

     const newArray = Array.from(selectedData);
     newArray.push(id);
     return newArray;

answered Jul 14, 2021 at 10:56

majdsalloum

5161 gold badge4 silver badges17 bronze badges

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

1 Comment

Sujan Over a year ago

thanks, it worked, i am new to react so such issues are always bugging me

Viet · Accepted Answer · 2021-07-14 11:02:36Z

1

Use spread operator to return new Array instead push

else {
  return [...selectedData, id];
}

edited Jul 14, 2021 at 11:02

answered Jul 14, 2021 at 10:45

Viet

12.9k2 gold badges18 silver badges23 bronze badges

2 Comments

Sujan Over a year ago

i think you are mean to spread selectedData not id

majdsalloum Over a year ago

should be [...selectedData,id]

Collectives™ on Stack Overflow

Click on checkbox is not checking checkbox instantly

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related