Create new key-value pairs using useContext and useReducer in React

I’m fetching data from an API using useEffect, this data is updating the context of my application by calling a dispatch function.

I would like the same reducer function that updates the context to also calculate a few new key-value pairs in my response object.

The response object is a list of objects, each of them should have one more key-value pair.

The API response looks as follows:

[{ID:'500T',
  values:[ 0 : {percentage: 0.4, cycles: 11400, hours: 212},
           1 : {percentage: 0.6, cycles: 12900, hours: 243},
           2 : {percentage: 0.3, cycles: 10100, hours: 197}]},

 {ID:'584T',
  values:[ 0 : {percentage: 0.8, cycles: 18400, hours: 277},
           1 : {percentage: 0.4, cycles: 10500, hours: 184},
           2 : {percentage: 0.9, cycles: 23100, hours: 306}]},

 {ID:'551T',
  values:[ 0 : {percentage: 0.2, cycles: 10400, hours: 177},
           1 : {percentage: 0.1, cycles: 10500, hours: 184},
           2 : {percentage: 0.4, cycles: 20100, hours: 106}]}]

What I’m trying to do is hand this list to another function that will create another key-value pair for each, calculating the maximum “percentage” and storing it. Please see below for more clarity.

[{ID:'500T',
  values:[ 0 : {percentage: 0.4, cycles: 11400, hours: 212},
           1 : {percentage: 0.6, cycles: 12900, hours: 243},
           2 : {percentage: 0.3, cycles: 10100, hours: 197}],
  maxPercentage: 0.6},

 {ID:'584T',
  values:[ 0 : {percentage: 0.8, cycles: 18400, hours: 277},
           1 : {percentage: 0.4, cycles: 10500, hours: 184},
           2 : {percentage: 0.9, cycles: 23100, hours: 306}],
  maxPercentage: 0.9},

 {ID:'551T',
  values:[ 0 : {percentage: 0.2, cycles: 10400, hours: 177},
           1 : {percentage: 0.1, cycles: 10500, hours: 184},
           2 : {percentage: 0.4, cycles: 20100, hours: 106}]},
  maxPercentage: 0.4}]

Thanks in advance for any help

Answer

Map the data to a new array. During the mapping map the values array to an array of percentages and spread into Math.max to return the maximum value. Shallow copy the current obj element and add a new maximumPercentage key/value property.

const res = data.map((obj) => ({
  ...obj,
  maxPercentage: Math.max(...obj.values.map(({ percentage }) => percentage))
}));

const data = [
  {
    ID: "500T",
    values: [
      { percentage: 0.4, cycles: 11400, hours: 212 },
      { percentage: 0.6, cycles: 12900, hours: 243 },
      { percentage: 0.3, cycles: 10100, hours: 197 }
    ]
  },
  {
    ID: "584T",
    values: [
      { percentage: 0.8, cycles: 18400, hours: 277 },
      { percentage: 0.4, cycles: 10500, hours: 184 },
      { percentage: 0.9, cycles: 23100, hours: 306 }
    ]
  },
  {
    ID: "551T",
    values: [
      { percentage: 0.2, cycles: 10400, hours: 177 },
      { percentage: 0.1, cycles: 10500, hours: 184 },
      { percentage: 0.4, cycles: 20100, hours: 106 }
    ]
  }
];

const res = data.map((obj) => ({
  ...obj,
  maxPercentage: Math.max(...obj.values.map(({ percentage }) => percentage))
}));

console.log(res);