Why i cant delete data from arrays more than one? React Native - react-native

Question

I want to delete item from array object base of selected checkboxes. But when I try to delete by id, it's only delete one object.
const [datas, setData] = useState([]); <-- i already setData(Data)
const deleteItemById = (id) => { << ----------- Something wrong with this code
const filteredData = datas.filter(item => item.id !== id);
setData(filteredData);
console.log(datas)
}
const selectedID = () =>{
--- Some API Post Method ---
--- example id_kunjungan is array and contain ["1","2"] from selected checbox
for (var i = 0; i < id_kunjungan.length; i++){
deleteItemById(id_kunjungan?.[i]) <<------- this return the id
console.log(id_kunjungan?.[i])
}
}
const Data= [
{
"start": "2022-01-01 10:35:08",
"id": "1",
"tanggal": "01-01-2022",
"hari": "Saturday",
},
{
"start": "2022-01-01 10:35:08",
"id": "2",
"tanggal": "01-01-2022",
"hari": "Saturday",
},
{
"start": "2022-01-01 10:35:08",
"id": "3",
"tanggal": "01-01-2022",
"hari": "Saturday",
},
{
"start": "2022-01-01 10:35:08",
"id": "4",
"tanggal": "01-01-2022",
"hari": "Saturday",
},
];
I already check for loop its run 2 times but the id[2] is not deleted, it only deletes the first id, not the second or third or more. Why this is happened? Or what is wrong with my code?

Answer 1

This is your code and you are using a for-loop to update the state, which mean states may not be updated correctly since you are updating states many times at one go, overwriting each update.
// This code is wrong ❌
for (var i = 0; i < id_kunjungan.length; i++){
deleteItemById(id_kunjungan?.[i]) // you are calling setDatas multiple times here which is wrong.
console.log(id_kunjungan?.[i])
}
You can try doing just
deleteItemByIds(id_kunjungan) // <--- send the entire array of Ids
Then modify your deleteItemByIds function to remove all items whose id matches.
const deleteItemByIds = (ids = []) => { // <<-- array of ids e.g. [1,2,3,4,5]
const filteredData = datas.filter(item => !ids.includes(item.id);
setData(filteredData);
// console.log(datas) // <--- ❌ Remove this. this will not give u the latest state because state updating is async
}
If you want to see the state change, add a useEffect block.
useEffect(() => {
console.log('datas', datas); //console log whenever datas changes.
}, [datas])

Answer 2

Try this
const Data= [
{
"start": "2022-01-01 10:35:08",
"id": "1",
"tanggal": "01-01-2022",
"hari": "Saturday",
},
{
"start": "2022-01-01 10:35:08",
"id": "2",
"tanggal": "01-01-2022",
"hari": "Saturday",
},
{
"start": "2022-01-01 10:35:08",
"id": "3",
"tanggal": "01-01-2022",
"hari": "Saturday",
},
{
"start": "2022-01-01 10:35:08",
"id": "4",
"tanggal": "01-01-2022",
"hari": "Saturday",
},
];
const deleteItems = (idsToDelete) => {
const newData = Data.filter((item) => {
return !idsToDelete.includes(item.id)
})
return newData
}
console.log(deleteItems(['1','2'])) // <--- pass the ids to delete here

Answer 3

Using Splice make it easier. Using id for finding index of array, and splice it.
const deleteItemById = (id) => {
setData((prevState) =>{
const index = prevState.map(function(x) {return x.id; }).indexOf(id);
const filteredData = prevState.splice(index, 1);
return [...prevState]
})
}