Good day,
I have two arrays. Array A takes info from api and fills Checkboxes with it.
-
0: {id: '80682ddb-0785-ec11-94f7-281878bb3ca6', name: 'test', typeId: 14, typeName: 'typename', typeAbbreviation: 'asa'}
This is how the array A looks.
And the Array B is storing selected checkboxes
0: {checked: true, id: '80682ddb-0785-ec11-94f7-281878bb3ca6', name: 'test', typeId: 14, typeName: 'typename', typeAbbreviation: 'asa'}
This is how the array B looks.
I am rendering tasks into Modal component. This is how i mapped the array to checkboxes:
const renderItems = () => { return currentItems?.map((item, index) => ( <FormControlLabel control={ <Checkbox value={item.name} key={index} checked={item.checked} id={item.typeAbbreviation} onChange={(e) => handleCheckboxChange(item, e.target.checked)} /> } label={item.name} /> )); };
This is how i am setting the selected items:
const handleCheckboxChange = (selectedItem, checked) => { if (checked) { setSelectedItems([ ...selectedItems, { id: selectedItem?.id, name: selectedItem?.name, typeId: selectedItem?.typeId, typeName: selectedItem?.typeName, typeAbbreviation: selectedItem?.typeAbbreviation, checked: true, }, ]); } else { setSelectedItems( selectedItems.filter((task) => task.name !== selectedItem.name) ); } };
These are visible in the modal.
If i check any of the checkboxes and close the modal and then open the modal again there is no Checked items. Everything is unchecked.
In example if i have 9 checkboxes and i checked 2 of them. After opening the modal again these two should be checked and 7 should be still unchecked.
Would appreciate any help.
Thanks
P.S
I am sorry i was able only to paste code like this.