How to update object at specific index in array within React state?

Question

I'm building a calorie counting application using React. One of my components has in its state a list of food items:

this.state = {
   items: [
      {
        name: 'Chicken',
        selectedServing: {
           label: 'breast, grilled',
           quantity: 3
        }
      },
      {
        name: 'French Fries',
        selectedServing: {
           label: 'medium container',
           quantity: 1
        }
      }
   ]

When a user changes the serving size they consumed, I have to update the properties of the item in the items[] array. For example, if a user ate another chicken breast, I'd need to change the selectedServing object in items[0].

Since this array is part of the component's state, I'm using immutability-helper. I've found that I can properly clone and mutate the state in this way:

let newState = update(this.state, {
  items: {
    0: {
      selectedServing: {
        servingSize: {$set: newServingSize}
      }
    }
  }
});

The above code sets the servingSize for the first element in the items[] array, which is Chicken. However, I won't know the index of the object I need to update beforehand, so the 0 I hardcoded won't work. It seems that I can't store this index in a variable, because update() will think it's an object key.

How can I programmatically update an object at a specific index in a list?

you don't know the index that you want to update? Do you not have the it as a variable? — Roy Wang
– Roy Wang, Commented Apr 28, 2018 at 17:29
@riwu I do have it as a variable, but I'm unable to use it because the update method recognizes it as an object key. — Miles Henrichs
– Miles Henrichs, Commented Apr 28, 2018 at 17:37

set0gut1 · Accepted Answer · 2018-04-28 17:35:13Z

2

An variable can be used as a key of an object.

let foo = 3
let newState = { items: { [foo]: { somthing: 'newValue' } } }
// above is equal to { items: { '3': { somthing: 'newValue' } } }

You can find the index number of 'Chicken' and save it into an variable, and use it to composit newState.

edited Apr 28, 2018 at 17:35

answered Apr 28, 2018 at 17:29

set0gut1

1,6821 gold badge10 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

How to update object at specific index in array within React state?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related