How to change an attribute of an array of objects correctly? Javascript ReactJS

Question

I have that array of objects:

this.state = {
  itemSquare: [{
      item: "bomb",
      status: false
    }, {
      item: "bomb",
      status: false
    }, {
      item: "bomb",
      status: false
    },
    {
      item: "bomb",
      status: false
    },
    {
      item: "field",
      status: false
    },
    {
      item: "field",
      status: false
    },
    {
      item: "field",
      status: false
    },
    {
      item: "field",
      status: false
    },
    {
      item: "field",
      status: false
    },
    {
      item: "bomb",
      status: false
    }, {
      item: "bomb",
      status: false
    }, {
      item: "bomb",
      status: false
    },
    {
      item: "bomb",
      status: false
    },
    {
      item: "field",
      status: false
    },
    {
      item: "field",
      status: false
    },
    {
      item: "field",
      status: false
    },
    {
      item: "field",
      status: false
    },
    {
      item: "field",
      status: false
    }

  ],
}

And I want to change the status just from a given one, I'm doing so:

teste = () => {
  this.state.itemSquare[0].status = true

  console.log(this.state.itemSquare)
}

However, I do not know why, it is altering others, what returns me is this:

(18)[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0
  : {
    item: "field",
    status: true
  }
1
  : {
    item: "field",
    status: false
  }
2
  : {
    item: "field",
    status: false
  }
3
  : {
    item: "field",
    status: false
  }
4
  : {
    item: "bomb",
    status: false
  }
5
  : {
    item: "bomb",
    status: false
  }
6
  : {
    item: "field",
    status: false
  }
7
  : {
    item: "bomb",
    status: false
  }
8
  : {
    item: "field",
    status: false
  }
9
  : {
    item: "bomb",
    status: false
  }
10
  : {
    item: "field",
    status: false
  }
11
  : {
    item: "field",
    status: false
  }
12
  : {
    item: "bomb",
    status: false
  }
13
  : {
    item: "field",
    status: false
  }
14
  : {
    item: "bomb",
    status: false
  }
15
  : {
    item: "field",
    status: false
  }
16
  : {
    item: "field",
    status: true
  }
17
  : {
    item: "bomb",
    status: false
  }
length
  :
  18
__proto__
  :
  Array(0)

And as you can see the 16 was also changed, how? If I just asked for the 0 position. Can someone help me?

You should use this.setState method in a immutable appeoach. — Metalik
– Metalik, Commented Jun 14, 2018 at 14:34

Jonas Wilms · Accepted Answer · 2018-06-14 14:37:53Z

2

Seems like these two objects are actually just one, referenced at two positions. So to resolve this, you have to clone / rewrite one of the objects so that it won't affect the other one:

this.state.itemSquare[0] = {
   item: "bomb"
   status: true
};

However rewriting the state in react is a very very bad thing. Instead you should call setState and mutate the state with a pure function:

this.setState(({ itemSquare }) => ({
  itemSquare: itemSquare.map(({ item, status }, index) => ({
    item, status: status || index === 0
  }))
}));

answered Jun 14, 2018 at 14:37

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

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

Comments

amrender singh · Accepted Answer · 2018-06-14 14:36:42Z

1

May be your object at index 16 and 0 have same reference. Like in the example given below.

var arr =[{"status" : false}];
arr[1] = arr[0];
console.log(arr[0]);
console.log(arr[1]);
arr[0].status = true;

console.log(arr[0]);
console.log(arr[1]);

answered Jun 14, 2018 at 14:36

amrender singh

8,2594 gold badges27 silver badges30 bronze badges

Comments

falinsky · Accepted Answer · 2018-06-14 14:40:02Z

1

You should use this.setState method in a immutable approach.

edited Jun 14, 2018 at 14:40

falinsky

7,4454 gold badges34 silver badges59 bronze badges

answered Jun 14, 2018 at 14:38

Metalik

9431 gold badge10 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to change an attribute of an array of objects correctly? Javascript ReactJS

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