score:0

Accepted answer

You need to pass the ticketID to your IconButton's onClick handler:

<IconButton 
  onClick={() => removeTicket(row.ticketID)} 
  aria-label="delete" 
  color="primary"
>
  <DeleteIcon />
</IconButton>

And update your handler where you can create a new array using the .filter() method:

const removeTicket = (ticketID)=> {
  setRows(rows.filter(item => ticketID !== item.ticketID)
}

This rows.filter() returns every element where the ticketID is not the same as the one you passed down.

score:0

If you know index that will be removed you can use Array.prototype.slice and the logic is disconsider the element at index.

So, you will have to add the index as second param in your map function and change the onClick on IconButton to () => removeTicket(index).

Your remove function will contains the following snippet:

setRows(prevRows => [
  ...prevRows.slice(0, index),
  ...prevRows.slice(index + 1)
]);

If you need the ticketId to make a call to an api you can get it through index rows[index] or by passing it in the onClick function () => removeTicket(row.ticketID, index)


Related Query

More Query from same tag