How to delete objects from react state hook array with a button click

Question

I'm trying to make a button that deleted an object from an array (which is the state) depending on the passed index, I've tried alot but none of my ways worked :( , so this is the code and hope i can find someone to help:

state:

const [items, setItems] = useState([{ name: "", quantity: "", unit: "" }]);

deleting function:

const deleteItem = (i) => {
    const newItems = [...items]
    newItems.splice(i, 1)
    setItems(newItems)
}

jsx elements:

    {
        items.map((item, i) => {
            return (
                <div key={i} className={`mt3 item-input-wrapper`}>
                    <div>some other els here</div>
                    <button onClick={() => deleteItem(i)} >delete item</button>
                </div>
            )
        })
    }

Clarity · Accepted Answer · 2020-04-01 18:08:47Z

8

You can do it with filter:

const deleteItem = (i) => {
  setItems(currentItems => currentItems.filter((item, index) => index !== i));
}

Altho you'd probably use smth more constant for accessing an item, like an id.

answered Apr 1, 2020 at 18:08

Clarity

10.9k2 gold badges27 silver badges38 bronze badges

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

1 Comment

Salah Eddine Makdour Over a year ago

didn't work, it deletes the last object in that array instead but not the wanted index

Collectives™ on Stack Overflow

How to delete objects from react state hook array with a button click

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related