Change property in array with Spread Operator returns object instead of array

Question

I want to change the property of an object similar to this, this is a simplified object with a few properties of the original:

 state = {
    pivotComuns: [
      {
        id: 1,
        enabled : true
      },
      {
      id: 2,
      enabled : true
     }
   ],
   otherProperties : "otherProperties"
 }

I'm changing the state of enabled like this:

 state = {
            ...state,
            pivotColumns: {
              ...state.pivotColumns,
              [2]: {
                ...state.pivotColumns[2], enabled: !state.pivotColumns[2].enabled
              }
            }
          }

It works, but instead of return an array like I is the pivotComuns property it returns an object, "notice that I change [] for {}":

state = {
        pivotComuns: {
          {
            id: 1
            enabled : true
          },
          {
          id: 2,
          enabled : true
         }
       },
       otherProperties : "otherProperties"
     }

What I'm doing wrong, I need to keep that property an array.

Your original code is missing a {...

Aaron Beall
– Aaron Beall

2017-02-08 18:11:17 +00:00
Commented Feb 8, 2017 at 18:11 — Aaron Beall
– Aaron Beall, Commented Feb 8, 2017 at 18:11
@Aaron not only {, missing the , also in object data

Mayank Shukla
– Mayank Shukla

2017-02-08 18:12:32 +00:00
Commented Feb 8, 2017 at 18:12 — Mayank Shukla
– Mayank Shukla, Commented Feb 8, 2017 at 18:12
Right I have updated the code.

Diego Unanue
– Diego Unanue

2017-02-08 18:25:29 +00:00
Commented Feb 8, 2017 at 18:25 — Diego Unanue
– Diego Unanue, Commented Feb 8, 2017 at 18:25

Erik Hålenius · Accepted Answer · 2017-08-02 08:00:03Z

9

Very late post, but for future reference, you could do the following:

state = {
   ...state,
   pivotColumns: state.pivotColumns.map(pc => 
    pc.id === 2 ? {...pc, enabled:!pc.enabled} : pc
  )
}

The advantage is that you will not change the object referenced in the "old array", you will instead insert a new object in its place. So if you would like to go back and forth in the state you can now do so.

example: https://codepen.io/anon/pen/JyXqRe?editors=1111

answered Aug 2, 2017 at 8:00

Erik Hålenius

911 silver badge2 bronze badges

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

Comments

finalfreq · Accepted Answer · 2017-02-08 18:20:48Z

1

I don't believe you can use the spread operator in such a way and in fact wouldn't recommend it if you could because it creates very hard to read code. There is a much simpler solution that I use on a daily basis when it comes to updating a key/value on an object where the value is an array:

var state = {
  pivotColumns: [
    {
      id: 1,
      enabled : true
    }, {
    id: 2,
    enabled : true
   }
 ],
 otherProperties : "otherProperties"
}

var clonedPivotColumns = state.pivotColumns.slice();

clonedPivotColumns[1].enabled = !state.pivotColumns[1].enabled;

state = {
   ...state,
   pivotColumns: clonedPivotColumns
 }

this will get you the right results and will not cause any mutations.

working pen http://codepen.io/finalfreq/pen/ggdJgQ?editors=1111

answered Feb 8, 2017 at 18:20

finalfreq

7,0202 gold badges29 silver badges28 bronze badges

1 Comment

finalfreq Over a year ago

@DiegoUnanue codepen saved when I didn't want it to I changed it back should be good now

Collectives™ on Stack Overflow

Change property in array with Spread Operator returns object instead of array

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related