Delete data in state React Hooks

Question

Maybe it is a dumb question, because I don't find any response on the net for this, but I'm trying to update my state after a axios.delete.

When I add data, I do this and it works fine :

const handleAddIncome = () => {
        let incomeName = document.getElementById('newIncomeName').value
        let incomeAmount = document.getElementById('newIncomeAmount').value
        let data = {
            [incomeName]: parseInt(incomeAmount)
        }
            axios({
                method: "put",
                url: `http://localhost:5000/api/balance/${uid}`,
                withCredentials: true,
                data: { incomes: { ...userWalletIncomes, ...data } }
            }).then(() => {
                setUserWalletIncomes({ ...userWalletIncomes, ...data })
            })
    }

I also added a bouton that delete the key/value, and this is where I'm stuck. Here is what I tried, but no success :

    const handleDeleteIncome = (key) => {
        let data = { [key]: "" }
        axios({
            method: "delete",
            url: `http://localhost:5000/api/balanceOneIncome/${uid}`,
            data: data
        }).then(() => {
            data[key] = null
            setUserWalletIncomes(...userWalletIncomes, data)
        })
    }

PS : the axios delete works fine, my database is updated normally. Not the state

Thanks for help !

[EDIT]

Here is my UseEffect :

useEffect(() => {
        if (uid !== null) {
            axios.get(`http://localhost:5000/api/balance/${uid}`)
                .then((res) => {
                    if (res.data[0].incomes && res.data[0].fees) {
                        setUserWalletIncomes(res.data[0].incomes)
                        setUserWalletFees(res.data[0].fees)
                    } else if (res.data[0].incomes && !res.data[0].fees) {
                        setUserWalletIncomes(res.data[0].incomes)
                        setUserWalletFees({ 'cliquez-ici': '' })
                    } else if (!res.data[0].incomes && res.data[0].fees) {
                        setUserWalletIncomes({ 'cliquez-ici': '' })
                        setUserWalletFees(res.data[0].fees)
                    }
                })
        }
    }, [uid])

Does this answer your question? [How do I remove a property from a JavaScript object?](https://stackoverflow.com/questions/208105/how-do-i-remove-a-property-from-a-javascript-object) — Alexander Staroselsky, Jul 12 '21 at 13:24
@AlexanderStaroselsky mmmh no, because I have to do it with the hooks, so that I don't have to reload the page to display the new state. You see what I mean ? — , Jul 12 '21 at 13:25

score 0 · Accepted Answer · answered Jul 12 '21 at 14:35

0

For those who need, I finally chose to change my controller in my backend and make it send the new object after the delete. I just take that response, and set the new state. Thanks

answered Jul 12 '21 at 14:35

score 0 · Answer 2 · answered Jul 21 '21 at 02:53

Because you already have setUserWalletIncomes({ ...userWalletIncomes, ...data }), I expect userWalletIncomes is an object like { name1: value1, name2: value2 }, right?

Then you have setUserWalletIncomes(...userWalletIncomes, data), use array spread on an object is a runtime error because it's not iterable:

let a = { foo: 42 };
console.log(...a); // TypeError: Found non-callable @@iterator

I guess you still wanted to write this:

let data = { [key]: "" };
setUserWalletIncomes({ ...userWalletIncomes, ...data });

But this only sets the key field to an empty string. To remove the field, you can combine the answer from How do I remove a property from a JavaScript object?

const temp = {...userWalletIncomes};
delete temp[key];
setUserWalletIncomes(temp);

Delete data in state React Hooks

2 Answers2