Unchecked checkbox value when filter the item

Question

<!-- begin snippet: js hide: false console: true babel: false -->

{allKanban.filter(item => {
                      if (searchKanban === ""){
                        return item;
                      } else if (item.kanbanNumber.toLowerCase().includes(searchKanban.toLowerCase())) {
                        return item;
                      }
                    })
                    .map((item, i) => {
                        return (
                          <TableRow key={i}>
                            <TableCell align="center" {...register(`selectedKanbanList.${i}.kanbanId`, { value: item.kanbanId })} >{item.kanbanNumber}</TableCell>
                            <TableCell align="center">
                              <Checkbox align="center" value={item.kanbanNumber} defaultChecked={item.isUsing} {...register(`selectedKanbanList.${i}.kanbanNumber`)} />
                            </TableCell>
                          </TableRow>
                        )
                      })}

As above mention code Trying to searchKanban in the list that time selected default checked value remove and showing unchecked value. How can I search items without removing the already selected checked value in the checkbox?

Answer 1

I suspect things will begin to work if you use ${item.kanbanId} instead of ${i} in the lines with register. You probably want to wire things up to a specific element in the array and not the element's position within the array. The position will change when you filter items out.