How to remove table row on click in reactjs?

Question

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.

how does d have the value of the ID of the shop ?

Mihai T
– Mihai T

2021-10-08 11:08:00 +00:00
Commented Oct 8, 2021 at 11:08 — Mihai T
– Mihai T, Commented Oct 8, 2021 at 11:08

Stalinko · Accepted Answer · 2021-10-08 11:07:11Z

2

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.

answered Oct 8, 2021 at 11:07

Stalinko

3,69434 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

stoen · Accepted Answer · 2021-10-08 10:52:35Z

0

Maybe try using filter instead:

const singleDelete = (d) => {
    setShop(shop.filter((contact) => contact.id !== d));
}

answered Oct 8, 2021 at 10:52

stoen

1365 bronze badges

Collectives™ on Stack Overflow

How to remove table row on click in reactjs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related