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

Question

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

score 1 · Accepted Answer · answered Jun 29 '21 at 05:00

1

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);

answered Jun 29 '21 at 05:00

Drew Reese

165,259
14
153
181

this was exactly what I was trying to do!! thanks you very much. Not sure if this falls under the realm of "advanced" or just "intermediate" but I didn't even know how to google for this. – ortunoa Jun 29 '21 at 15:51
@ortunoa Which aspect? The mapping of one array *into* the next to add a property, or the computing of a maximum value from an array? I would say these are basic level of knowledge items, but it's more like knowing/learning how to break a problem down to smaller parts that are easier to solve. – Drew Reese Jun 29 '21 at 15:59
Yeah the combination of all, destructuring and then creating new key-value pairs that map to a function. I guess it just has a bunch of moving parts that make it slightly confusing but it works like a charm. I guess this returns an array, correct? ( ...obj.values.map(({ percentage }) => percentage) ) – ortunoa Jun 29 '21 at 16:04
@ortunoa Affirmative, `obj.values.map(({ percentage }) => percentage)` generates an array of percentage values, i.e. `[0.4, 0.6, 0.8, ....]` and spreading this into `Math.max` passes all the values in, i.e. like if you had called `Math.max(0.4, 0.6, 0.8, ....)`. – Drew Reese Jun 29 '21 at 16:07
Won't forget this one, took me almost 2 hours of headbanging before I came here. Thanks again. – ortunoa Jun 29 '21 at 16:40

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

1 Answers1