0

I'm having a strange issue with Redux on React with a table generated with fixed-data-table, whose rows depend on a computed state variable.

There's a checkbox on each of these rows in order to be able to select the data in bulk. When a button is pressed, all checked rows hide and here's when the issue arises: if the top row was checked and the one below wasn't, when the table is rerendered, the top row checkbox remains checked (after the original top row has been hidden).

The normal columns showing data are generated dynamically, but the one with the checkbox is generated like this:

<Column
 width={75}
 header={<Cell>Check</Cell>}
 columnKey="selectCol"
 cell={({rowIndex, ...props}) => (
  <Cell>
   <input type="checkbox" onChange={(e) => {
     var chk = e.target;
     {/* stuff that doesn't affect whether it's checked or not when rendered */}
    }}
  </Cell>
 )}
/>

Anyone knows what could be happening? Thank you very much

Gothbag
  • 11
  • 7

1 Answers1

0

You need to set the value of each checkbox.. I mean in the initial state of each checkbox make it false. And then in when the onchange happens make it true for the target event. So whenever it is dynamically generated have checkbox object with a unique id for each cell which corresponds to some value (initialState = true/false) according to your choice. After that keep updating the state according to your choice.

Aritra Ghosh
  • 656
  • 5
  • 11
  • But how would you update the checkbox's state? I can't update it as each cell containing the checkbox is generated by the fixed-data-table component. – Gothbag Oct 17 '16 at 08:25
  • Can you provide an example please? I've managed to update the state but the top row remains checked. – Gothbag Oct 17 '16 at 08:45