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?

CodePudding user response：

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])

CodePudding user response：

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

CodePudding user response：

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]
        })
    }