React reducer (add object key to object)

Question

I have an object like this:

const fruits = {
    "Orange": {  "price": 0.25, "inventory": 10},
    "Banana": { "price": 0.30, "inventory": 10},
    "Apple": { "price": 0.95, "inventory": 10},
}

and I want to write reducer to get object like this:

const fruits = {
    "Orange": { name: "Orange", "price": 0.25, "inventory": 10},
    "Banana": { name: "Banana", "price": 0.30, "inventory": 10},
    "Apple": { name: "Apple", "price": 0.95, "inventory": 10},
}

My reducer:

    const fruitsByName = (state = {}, action) => {
      switch (action.type) {
      case "RECEIVE_FRUITS":
        return action.products
      default:
        return state
      }
  }

Please help me out, I feel like I've tried everything.

felixmosh · Accepted Answer · 2017-09-23 10:29:34Z

1

You can achieve that using Object.keys, it returns you an Array with all the keys.

const fruits = {
  "Orange": {
    "price": 0.25,
    "inventory": 10
  },
  "Banana": {
    "price": 0.30,
    "inventory": 10
  },
  "Apple": {
    "price": 0.95,
    "inventory": 10
  },
};

const result = Object.keys(fruits).reduce((res, currentKey) => {
  res[currentKey] = { ...fruits[currentKey],
    name: currentKey
  };
  return res;
}, {});

console.log(result);

answered Sep 23, 2017 at 10:29

felixmosh

35.9k10 gold badges81 silver badges99 bronze badges

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

Comments

js_248 · Accepted Answer · 2017-09-23 10:28:40Z

0

You should also be having a Action file corresponding to this reducer. So in Action you will be getting this object

const fruits = {
    "Orange": {  "price": 0.25, "inventory": 10},
    "Banana": { "price": 0.30, "inventory": 10},
    "Apple": { "price": 0.95, "inventory": 10},
}

you can iterate through fruits and add new name to each object and reuturn this final object. All logic modifications should be done in Action file.

answered Sep 23, 2017 at 10:28

js_248

2,1204 gold badges29 silver badges38 bronze badges

Comments

Chtioui Malek · Accepted Answer · 2017-09-23 10:56:33Z

0

You should pass your fruits object in action.fruits, and in your reducer :

case "RECEIVE_FRUITS":
   let newFruits = {};
   for (const [key, value] of Object.entries(action.fruits)) { 
      newFruits[key] = {...value, name : key}
   }
   return {...state, fruits: newFruits};

and your new state will contain the fruits object as you want it.

edited Sep 23, 2017 at 10:56

answered Sep 23, 2017 at 10:37

Chtioui Malek

11.6k1 gold badge76 silver badges70 bronze badges

Collectives™ on Stack Overflow

React reducer (add object key to object)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related