State is not getting updated in Reactjs

Question

I am trying to update the finalShapes state from initialShapes state and I am having a problem that finalShapes is not getting updated. I am making some changes in initalShapes state and then storing that manipulated data in finalShapes. Please tell me what am I doing wrong

this.state.initialShapes.map (sh => {
   var data = {};
   data.name = sh.name;
   data.x1 = sh.x;
   data.y1 = sh.y;
   data.x2 = sh.x + sh.width;
   data.y2 = sh.y + sh.height;
   this.setState ({finalShapes : [...this.state.finalShapes, data]});
});

Answer 1

You do not update the state in a loop because it does not immediately update the state. It means that the next iteration of the loop will not see updated state.

ReactDocs:

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall.

You can copy your inistialShapes and update the state once

var updatedShapes = this.state.initialShapes.map (sh => {
  var data = {};
  data.name = sh.name;
  data.x1 = sh.x;
  data.y1 = sh.y;
  data.x2 = sh.x + sh.width;
  data.y2 = sh.y + sh.height;

  return data;
});

this.setState ({finalShapes : updatedShapes });