how to add property to object in object array in react

Question

I have a state that looks like this:

attributes: [
{name: "capacity", items: [{ value: '256GB'},{value: '512GB'}]},
{name: 'With USB 3 ports', items: [{value: 'Yes'}, { value: 'No'}]}
]

I want to create a function which takes 2 paramaters, for example "capacity" and "256GB", I want to iterate over attributes state and find the object where the value property is 256GB and add another property in that object.

so I want the state to look like this:

attributes: [
{name: "capacity", items: [{ value: '256GB', selected: true},{value: '512GB', selected: false}]},
{name: 'With USB 3 ports', items: [{value: 'Yes'}, { value: 'No'}]}
]

for (attribute in attributes) { if attribute.items[0].value == '256GB' { attribute.items.push(something) } } — Sasha Kondrashov
– Sasha Kondrashov, Commented Oct 20, 2022 at 21:37
@SashaKondrashov don't use for...in on an array and if this is stored in state don't mutate by pushing. — pilchard
– pilchard, Commented Oct 20, 2022 at 21:45
see: Updating deeply nested state with useState not working properly and React State update a nested array with objects based on the id when iterated for some discussion — pilchard
– pilchard, Commented Oct 20, 2022 at 22:32
@pilchard whoops, I could have sworn I wrote "for...of", my bad :x — Sasha Kondrashov
– Sasha Kondrashov, Commented Oct 21, 2022 at 13:13

Besnik Korça · Accepted Answer · 2022-10-21 05:33:21Z

0

There are multiple ways to do this, the easiest way to do this is to use in-build javascript functions like map, and reduce as shown in the example below

Added an example at codesandbox on how this could be achieved. The part you need to be careful is when working with objects/arrays that hold state in react, is that you do not intend to mutate them. It's out of scope for this question to explain but to get a clear understanding of it research how javascript passes parameters.

answered Oct 21, 2022 at 5:33

Besnik Korça

1,1245 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

how to add property to object in object array in react

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related