This is an addon to my previous question; I am trying to delete a specific row when the button is clicked, however everytime the button is clicked it deletes the next table row instead of itself. Here is what it looks like with a video. The current code I am using to perform this action is:
const [shop, setShop] = useState([]);
const singleDelete = (d) => {
const newArr = [...shop];
const index = shop.findIndex((contact) => contact.id === d);
newArr.splice(index, 1);
setShop(newArr);
}
return (
<div className="content">
<Table>
<tbody id="tbid">
{(shop.map((s,i) => (
<tr key={`${s+i}`} id={i} value={`${i}Row`}>
<td>{i}</td>
<td>{profil[i]}</td>
<td>{s}</td>
<td></td>
<td>{acc[i]}</td>
<td>
<Button className="btn-round btn-icon" color="danger" size="sm" type="submit" onClick={singleDelete}>
<i className="icon-simple-delete"/>
</Button>
</td>
</tr>
)))}
</tbody>
</Table>
<div>
)
I have tried using
setShop(shop.filter((_, index) => index !== d));
But the results are still the same.
The problem is you don't pass the ID into the singleDelete function.
Change this:
onClick={singleDelete}
to this:
onClick={ () => singleDelete(s.id) }
And it would be nice to rewrite singleDelete function like @stoen recommended.
Maybe try using filter instead:
const singleDelete = (d) => {
setShop(shop.filter((contact) => contact.id !== d));
}