Update Item React Native

Question

I'm creating a billing app in which i have a items state it is as same as TODO.

When I click on edit the item I do something like this -

1. delete the original todo

2. create a duplicate of it with another item.id

But the problem is that it deletes the original todo then when i creates it's duplicate it re-add the deleted item

Code

const [items, setItems] = React.useState([
]);
const addTodo = () => {
    const newitem = {
        id: Math.random(),
        item_name: 'name',
        item_price: 256,
        item_qty: 1,
    };
    setItems([...items, newitem]);
};
const deleteItem = ItemId => {
    const newItem = items.filter(item => item.id != ItemId);
    setItems(newItem);
};
const onPress = (navigation, item) => { 
    navigation.navigate('EditItem', {
        onReturn: (item) => { //this is where i'm trying to do that logic
            // const newItem = items.filter(item => item.id != ItemId);
            // setItems(newItem);
            const new22 = item;
            deleteItem(item.id);
            const newitem2 = {
                id: Math.random(),
                item_name: new22.item_name,
                item_price: new22.item_price,
                item_qty: new22.item_qty,
            };

            setTimeout(() => {
                setItems([...items, newitem2]);
            }, 2000);

            // alert(JSON.stringify(item.id));
        }, navigation, item
    })
};

App Image -

Answer 1

You can try this. :)

onReturn: (item) => { //this is where i'm trying to do that logic
            const nextState = items.filter(i => i.id !== item.id);
            const updatedItem = {
                id: Math.random(),
                item_name: new22.item_name,
                item_price: new22.item_price,
                item_qty: new22.item_qty,
            };

            setItems([...nextState, updatedItem])
        }