React useReducer - update array of objects

Question

I want to use React.useReducer to update state. My state is an array of objects. When update action is triggered, not only value from desired index is updated but all of them. I want to have updated only the value from indicated array index. How can I do that?

After I click button1, I want to get

[{"amount":null,"kcal":null,"name":null,"isPieceType":false},
{"amount":null,"kcal":null,"name":null,"isPieceType":false},
{"amount":null,"kcal":125,"name":null,"isPieceType":false},
{"amount":null,"kcal":null,"name":null,"isPieceType":false}]

instead of

[{"amount":null,"kcal":125,"name":null,"isPieceType":false},
{"amount":null,"kcal":125,"name":null,"isPieceType":false},
{"amount":null,"kcal":125,"name":null,"isPieceType":false},
{"amount":null,"kcal":125,"name":null,"isPieceType":false}]

I tried to copy state as const newState = [...state] and use lodash's cloneDeep. Below, link to jsfiddle with code to reproduce.

https://jsfiddle.net/wtj5eyfh/

Amila Senadheera · Accepted Answer · 2022-02-06 11:24:04Z

1

Your initial state of ingredientsState has references to the same object called initialIngredient. That caused everything to update when one entry was updated. Even though const stateToUpdate = [...state]; created a new array again all entries refers to the same object.

Fix

Change the following referenced array entries

const [ingredientsState, ingredientsDispatch] = React.useReducer(mealReducer, [
    initialIngredient,
    initialIngredient,
    initialIngredient,
    initialIngredient
]);

To be an array of copies of initialIngredient object (spread operator simply create clones of the referred object)

const [ingredientsState, ingredientsDispatch] = React.useReducer(mealReducer, [
    { ...initialIngredient },
    { ...initialIngredient },
    { ...initialIngredient },
    { ...initialIngredient }
]);

JS Fiddle

edited Feb 6, 2022 at 11:24

answered Feb 6, 2022 at 11:15

Amila Senadheera

13.4k16 gold badges31 silver badges48 bronze badges

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

2 Comments

Amila Senadheera Over a year ago

@Zaharskyy, check this out !!

Zaharskyy Over a year ago

Indeed, it works. Thank you :)

Collectives™ on Stack Overflow

React useReducer - update array of objects

1 Answer 1

Fix

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Fix

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related