Как удалить объекты из массива хуков реагирующего состояния нажатием кнопки

Question

Я пытаюсь сделать кнопку, которая удаляла объект из массива (который является состоянием) в зависимости от переданного индекса, я пробовал много, но ни один из моих способов не сработал :(, так что это код и надеюсь, я найду кого-нибудь, кто поможет:

состояние:

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

функция удаления:

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

jsx элементы:

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

Answer 1

Вы можете сделать это с помощью filter:

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

Хотя вы, вероятно, будете использовать что-то более постоянное для доступа к элементу, например, к идентификатору.