How to update an array item in React?

Question

I am working with a legacy database, where is there no unique index number for each row. Still, I want to have the ability to update items a row. I created a child component, which has a form, to update a row. I am able to identify the index number of the row. And then I move the updated values, and the index number, up to the parent. I'm trying to update the state at the parent level.

My problem is that I am unable to update the state at the parent level.

Here are portions of my code:

//Gifts is a js file with json
import { Gifts } from "./Gifts";

const Main = (props) => {

    const [gifts, setGifts] = useState(Gifts);

    const handleEditSubmit = (values) => {
        console.log(values);
        setGifts(gifts =>
            {const list = gifts.map((gift, index) => {
                if (index === values.index) {
                    delete values.index;
                    return values;
                } else {
                    return gift;
                }
            });
            console.log(list);
            return (
                {list}
            )
            });
        console.log(gifts);
    };
    return(
        <div>
            <div>
                <GiftDisplay gifts={gifts}
                    onFormSubmit={handleGiftCreate}
                    onEditSubmit={handleEditSubmit}
                    />
            </div>
        </div>
    );
};

I have another function, called handleGiftCreate, which works just fine.

When I check the output of console.log(list), the output is correct. The list has the updated row. But when I check console.log(gifts), I see that the state has not updated.

Initial state of the fourth row is

    {
        "AutoId": 4263,
        "ID": 0,
        "Year": 2021,
        "Date": "2020-12-31T00:00:00.000Z",
        "Transaction": "Gift",
        "AmountOld": 0,
        "Deposit": "PayPal",
        "Amount": 20
    }

Notice that the initial state Amount is 20.

The values - input to the handleEditSubmit - is

{index: 4, AutoId: 2810, ID: 0, Year: 2021, Date: '2020-12-31T00:00:00.000Z', …}
Amount: "2588"
AutoId: 2810
Date: "2020-12-31T00:00:00.000Z"
Deposit: "PayPal"
ID: 0
Transaction: "Gift"
Year: 2021

Notice that the Amount is updated to 2588.

Fourth item of console.log(list) is

Amount: "2588"
AutoId: 2810
Date: "2020-12-31T00:00:00.000Z"
Deposit: "PayPal"
ID: 0
Transaction: "Gift"
Year: 2021

Note that the amount updated properly in list.

The result of console.log(gifts), however, is

Amount: 25
AmountOld: 0
AutoId: 2810
Date: "2020-12-31T00:00:00.000Z"
Deposit: "PayPal"
ID: 0
Transaction: "Gift"
Year: 2021

The state did not update! Please help!

Please remove the: `console.log(gifts);` from just below `setGifts`. Instead, add this just after the `useState` line: `useEffect(() => { console.log(gifts); }, [gifts]);`. This use-effect will log the `gifts` to console every single time when `setGifts` gets updated. Please [see this question and its related answers](https://stackoverflow.com/q/54069253/13658816) to confirm if it's useful in your context. — jsN00b, Apr 14 '22 at 03:16
@jsN00b Thanks for your answer. I tried it, but it did not work. Instead, trying `setGifts((gifts) => {` worked. I'm still not quite sure why we need () around gifts. — ssaran, Apr 14 '22 at 16:44

score 0 · Answer 1 · answered Apr 14 '22 at 16:37

So I changed handleEditSubmit to have parenthesis around gifts, as in setGifts((gifts) => {. And it worked. I'm still not quite sure why these parenthesis were needed.

    const handleEditSubmit = (values) => {
        //console.log(values);
        setGifts((gifts)=>
            {const list = gifts.map((gift, index) => {
                if (index === values.index) {
                    delete values.index;
                    return values;
                } else {
                    return gift;
                }
            });
            console.log(list);
            return (
                list
            )
            });
    };

How to update an array item in React?

1 Answers1