Update a property in an array of objects

Question

I try to increment a quantity property in an array of objects with React. But I can't figure out how I can reach the item to update.

What I tried:

const initialState = {
  items: [{
      id: 254,
      quantity: 1
    },
    {
      id: 493,
      quantity: 1
    }
  ],
};

const payload = {
  id: 254
};

function updateProduct(state, action) {
  return state.items.map((item, i) => {
    if (item.id === action.id) {
      return {
        ...state,
        items: [
          ...state.items,
          {
            [i]: {
              quantity: state.items[i].quantity + 1
            }
          }
        ]
      };
    }
  });
}

The returned object should be:

{
  items: [{
      id: 254,
      quantity: 2
    },
    {
      id: 493,
      quantity: 1
    }
  ],
}

Thanks for your help !

What do you mean by "without mutating"? You have to mutate in order to have the connected components update — Meir, Jul 17 '19 at 08:01

Chris Ngo · Answer 1 · 2019-07-17T08:07:58.567

1

Seems like you digged a little deep there. Based on the data you provided, isnt this as simple as:

function updateProduct(state, action) {
  return state.items.map((item, i) => {
    if (item.id === action.id) {
       return {
         ...item,
         quantity: item + 1
       }
    } else {
       return item
    }
  });
}

edited Jul 17 '19 at 08:07

answered Jul 17 '19 at 08:02

Chris Ngo

15,460
3
23
46

It's much cleaner that way... But it only updates the item object, not the state. – Jul 17 '19 at 09:01
@SLePort did Meir's answer below not work? I thought that would be enough to update state. – Chris Ngo Jul 17 '19 at 09:04

score 1 · Accepted Answer · answered Jul 17 '19 at 08:07

I will suggest a few changes:

Use the convention of action with {type, payload}
Perform the action in a reducer.

so this yields:

const reducer = (state, action) => {
  const {type, payload} = action;

  switch(type) {
    case 'update_quantity':
      const {id: itemId, quantity} = payload
      return ({
        ...state,
        items: state.items.map(item => (item.id === itemId ? {...item, quantity} : item)
    default:
      return state;
  }
}

and then, to update:

dispatch({type: 'update_quantity', payload: {id: 'xxx', quantity: 3}});

score 0 · Answer 3 · answered Jul 17 '19 at 08:10

first of all you have to clone/store your arr state/values in new variable

let state = [...initialState.items] // now you have all the values in state var

// and then mutate the state
let mutatedState = state.map(el => {
  //modify data how you need
});

// Then assign mutatedState to initialState.items

initialState.items = mutatedState 
};

score 0 · Answer 4 · answered Jul 17 '19 at 08:11

Assuming you want

{
  items: [{
      id: 254,
      quantity: 2
    },
    {
      id: 493,
      quantity: 2 // <<<<<<<<<<<< 2 here as well
    }
  ],
}

and also assuming you can use the latest and greatest of ECMA Script:

const initialState = {
  items: [{
      id: 254,
      quantity: 1
    },
    {
      id: 493,
      quantity: 1
    }
  ],
};

const reduceIncrementQuantity = (item) => ({...item, quantity: item.quantity + 1});
const reduceIncrementQuantities = (state) => ({items: state.items.map(reduceIncrementQuantity)});

console.log(reduceIncrementQuantities(initialState));

Naveen Kumar V · Answer 5 · 2019-07-17T08:23:57.687

SOLUTION:

To be simple, Deep clone the object (state) and increment the specified value.

const initialState = {
  items: [{
      id: 254,
      quantity: 1
    },
    {
      id: 493,
      quantity: 1
    }
  ],
};
  
const payload = {
  id: 254
};
  
  
console.log (updateProduct(initialState, payload));

function updateProduct(state, action) {
  var newState = JSON.parse(JSON.stringify(state));
  var isFound = false;
  newState.items.forEach(item => {
    for (var prop in item) {
    if (prop === 'id' && item[prop] == action.id) {
      item.quantity++; isFound = true; break;
    }
    }
    if (isFound) return;
  });
  return newState;
}

score 0 · Answer 6 · answered Jul 17 '19 at 08:13

0

You can write this as,

function updateProduct(state, action) {
  return { ...state, 
    items: state.items.map(item => ({ 
       ...item, 
       quantity: action.id === item.id ? item.quantity + 1 : item.quantity 
    })) 
  }
}

answered Jul 17 '19 at 08:13

Avin Kavish

8,317
1
21
36

score 0 · Answer 7 · answered Jul 17 '19 at 09:41

This is how I usually update items in redux store array You can do it like this:

function updateProduct(state, action) {

  let updatedItems = state.items.map((item)=>{

  if(item.id=== action.id){
      return {...item,quantity:item.quantity+1}
    }
    return item
  })
  return {...state, items:updatedItems}
}

Update a property in an array of objects

7 Answers7

Linked