React - setState within a for loop to add data to array

Question

I have an array of locations with lat/lng coordinates. I am using a distance calculating function to determine the distance of each location from the center of a Google map in order to sort the array by distance, as well as render the distance in my app. Currently I am doing that like so:

for(var i=0; i < this.state.locations.length; i++) {
    this.state.locations[i]['distance'] = this.calculateDistance(this.state.locations[i].coords, this.state);
}

const sortedlocations = this.state.locations.sort((a, b) => a.distance - b.distance);
this.setState({locations: sortedlocations});

This is actually working as desired, but I am getting a warning Do not mutate state directly. Use setState() so I would like to get it working the correct way. I am not quite sure how to use setState within this for loop. I tried below just taking a stab in the dark, but it didnt work haha:

for(var i=0; i < this.state.locations.length; i++) {
    this.setState({
        locations[i]['distance']: = this.calculateDistance(this.state.locations[i].coords, this.state);
    })
}

Here is an example of what this.state.locations looks like:

[
  {
    "location": "Lorem Ipsum",
    "description": "Lorem Ipsum"
    "coords": {
      "lat": -50.12424,
      "lng": 80.04562
    }
  },
  {
    "location": "Lorem Ipsum 2",
    "description": "Lorem Ipsum 2"
    "coords": {
      "lat": -37.10005,
      "lng": 65.55088
    }
  },
  {
    "location": "Lorem Ipsum 3",
    "description": "Lorem Ipsum 3"
    "coords": {
      "lat": -56.39949,
      "lng": -98.10049
    }
  },
  {
    "location": "Lorem Ipsum 4",
    "description": "Lorem Ipsum 4"
    "coords": {
      "lat": -67.61780,
      "lng": 145.47068
    }
  }
]

Joshua Obritsch · Accepted Answer · 2019-12-28 21:13:20Z

1

You should never mutate state directly. Always create a copy, mutate the copy and then call setState with the new copy so that it will create a new object reference in memory.

Instead of this:

for(var i=0; i < this.state.locations.length; i++) {
    this.state.locations[i]['distance'] = this.calculateDistance(this.state.locations[i].coords, this.state);
}

Try this:

const locations = [ ...this.state.locations ];

for(var i=0; i < locations.length; i++) {
    locations[i]['distance'] = this.calculateDistance(locations[i].coords, this.state);
}

Then do the rest like this:

const sortedlocations = locations.sort((a, b) => a.distance - b.distance);
this.setState({locations: sortedlocations});

answered Dec 28, 2019 at 21:13

Joshua Obritsch

1,2939 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

React - setState within a for loop to add data to array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related