How to push new value into array of object in React

Question

I think it might be silly question to ask but trust I am new to React . I am trying to push new key and value to array of object but I am not able to do it . Could someone please help me how to achieve my goal. Thanks

Code

this.state= {
cartItems=[
{name:'item1',price:'$23'},
{name:'item2',price:'$26'},
{name:'item3',price:'$24'},
]

I want to add new value like quantity:0 in the end of array of object. Please help me

What have you done so far to make this work? Where did you get stuck? — fjc, Apr 27 '20 at 11:00
I literally googled your thread header : https://stackoverflow.com/questions/37435334/correct-way-to-push-into-state-array — emrhzc, Apr 27 '20 at 11:00
Do you mean to add `quantity: 0` for *each* object or as a *separate object* at the end of the array? — leonardfactory, Apr 27 '20 at 11:01
Does this answer your question? [Correct way to push into state array](https://stackoverflow.com/questions/37435334/correct-way-to-push-into-state-array) — emrhzc, Apr 27 '20 at 11:01
@leonardfactory Yes, I want to add `quantity:0` it the end of each object — Jonas, Apr 27 '20 at 11:02

score 1 · Accepted Answer · answered Apr 27 '20 at 11:11

If you want to update state adding a property to each object, you should just use setState in combination with map. Array.prototype.map allows you to transform each object, like this:

this.setState(state => {
  cartItems: state.cartItems.map(cartItem => ({ 
    ...cartItem, // Keep all old properties
    quantity: 0 // Add quantity
  })
})

You should do this only if you're calling setState after the initializer. If you need to modifiy the data right when assigning to this.state, just map the array directly.

Aaron · Answer 2 · 2020-04-27T11:10:23.057

0

Maybe try this

const newState = this.state.cartItems.map(item => {
  item.quantity = 0;

  return item;
});

this.setState({cartItems: newState});

edited Apr 27 '20 at 11:10

answered Apr 27 '20 at 11:03

Aaron

2,364
2
31
56

Sachin · Answer 3 · 2020-04-27T11:27:07.347

0

this.state= {
  cartItems:[
    {name:'item1',price:'$23'},
    {name:'item2',price:'$26'},
    {name:'item3',price:'$24'},
  ]
}
updateCartItems=()=>{ 
   var cartItems = this.state.cartItems.map((item)=>{
      return {...item,quantity:0}
   })
   this.setState({cartItems})
}

edited Apr 27 '20 at 11:27

answered Apr 27 '20 at 11:11

Sachin

911
8
12

did you call updateCartItems function? like ex: componentDidMount() { this.updateCartItems() } – Sachin Apr 27 '20 at 11:21
Yes, I called this method in componentdidmount – Jonas Apr 27 '20 at 11:21
1

Just to highlight it, you used `filter` instead of map and wrote `quality` instead of `quantity` – leonardfactory Apr 27 '20 at 11:25

How to push new value into array of object in React

3 Answers3