how to update nested array values in immutable way in reactjs

Question

I am working on reactjs

[
    {
        key: 'a',
        map: [
            {
                brand: 'sam',
                year: 2015,
                models: [
                    {
                        pk: 1,
                        value: 15,
                    },
                    {
                        pk: 2,
                        value: 20,
                    },
                ],
            },
            {
                brand: 'sony',
                year: 2016,
                models: [
                    {
                        pk: 3,
                        value: 15,
                    },
                    {
                        pk: 4,
                        value: 20,
                    },
                ],
            },
        ],
    },
    {
        key: 'b',
        map: [
            {
                brand: 'nok',
                year: 2015,
                models: [
                    {
                        pk: 1,
                        value: 15,
                    },
                    {
                        pk: 2,
                        value: 20,
                    },
                ],
            },
            {
                brand: 'folo',
                year: 2016,
                models: [
                    {
                        pk: 3,
                        value: 15,
                    },
                    {
                        pk: 4,
                        value: 20,
                    },
                ],
            },
        ],
    },
]

now my task is user update value of value attribute so I have to update my whole array. I am struggling that do it in immutable way. have written code to update like this way

let groupB = [...this.state.groupB];

  const modifiedPrgram = groupB.filter(data => data.brand === obj.brand)
  .map(proData => proData.map.filter(filetredData => filetredData.year === this.props.year))
  let models=modifiedPrgram[0].map(data => data.models)

  var selectedData = models.filter(data => data.pk === obj.pk);

    var diff = obj.value - selectedData[0].value;

    var otherData = models.filter(data => data.pk !== obj.pk);

    var sum = otherData.map(data => data.value).reduce((a, b) => a + b, 0);

    for (var i = 0; i < models.length; i++) {
      if (models[i].pk !== obj.pk) {
        models[i].value =
          models[i].value -( models[i].value / sum )* diff;
      } else 
        models[i].value = obj.value;

    }

but now confused how to re add that value in my groupB. please suggest me something in this

The object literal is invalid (unbalanced braces, duplicate 'key' property in same object) and does not match the code: the code assumes "brand" and "map" are properties of the same object, while in your object literal is "brand" belongs to objects in the array assigned to the "map" property. Please make this question something that is at least consistent. — trincot
– trincot, Commented Aug 19, 2017 at 9:15
Maybe have a look at; github.com/kolodny/immutability-helper — Koen.
– Koen., Commented Aug 19, 2017 at 9:53

marpme · Accepted Answer · 2017-08-19 09:59:52Z

3

In general you can change the value of every group by using this piece of code:

// afterwards you receive a new Group in the same format as before!
const newGroup = groups.map(group => ({
    ...group,
    map: group.map.map(branding => ({
        ...branding,
        models: branding.models.map(model => ({ 
         ...model, 
         value: 10 /* Change the value over here! */ 
      })),
    })),
}))

This is obviously very nested and not very readable, but it's immutable. For next time I would recommend using libraries like immutable.js or something else!

answered Aug 19, 2017 at 9:59

marpme

2,4351 gold badge17 silver badges23 bronze badges

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

6 Comments

vihang shah Over a year ago

u mean to say the code I have written for updating should replace with the code u have given?if yes how can I write my whole for loop here it's complex for me to read

marpme Over a year ago

No this isn't copy-paste-flow. I just wanted to give you a general Idea how to handle our "data" in a immutable way. And you haven't described what you are "filtering/ordering" for so I can't reproduce it.

vihang shah Over a year ago

oohh ok..I will try to update the value.if I face any issue I know whom to reach..;)

marpme Over a year ago

Feel free to do so!

marpme Over a year ago

@vihangshah if this helped you out with your problem feel free to mark it as the valid the solution and give it an upvote.

|

Luthfi · Accepted Answer · 2018-05-13 02:06:02Z

This is another example of immutable array

case MOVE_DEVICE_SUCCESS:
  console.log(action.payload);
  let Groups = [...state];
  let idxGroup = Groups.findIndex(group => {
    return group.id === action.payload.GroupId;
  });

  let idxDevice = Groups[idxGroup].Devices.findIndex(device => {
    return device.id = action.payload.id;
  });

  let temp = {...Groups[idxGroup].Devices[idxDevice]};

  let newOne = [...Groups.map(group => {
    if (group.id === action.payload.GroupId){
      const filtered = group.Devices.filter(device => {
        if(device.id !== action.payload.id){
          return {...device}
        }
      });
      group.Devices = [...filtered];
      return {...group}
    } else if (group.id === action.payload.TargetGroupId){
      group.Devices = [...group.Devices, {...temp}];
      return {...group}
    } else {
      return {...group}
    }
  })]
  return [...newOne];

default:
  return state

Collectives™ on Stack Overflow

how to update nested array values in immutable way in reactjs

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related