setState not working for updating an array in React

Question

I try to update a state in a location object. somehow the setState isn't working for me.

The console.log does return the newName correctly.

I don't see directly where my fault is. Can someone tell me where my error is?

state = {
    locations: [
       {name:"name1", address:"address1", locationSelected:false},
       {name:"name2", address:"address2", locationSelected:false}
    ]
}

selectLocationHandler = (id) => {
    let theLocations = [...this.state.locations];
    theLocations[id] = {...theLocations[id], name:"newName!!!!"};
    console.log(theLocations[id].name + "testtest");

    this.setState({theLocations}, () => {
        console.log(this.state.locations[id].name + " it worksss");
    });
}

Answer 1

The main problem with this code is that your are altering a state object directly. You should treat all state objects as if they are immutable. In your code, you do not actually need the setState call because the state would already be updated. When you define theLocations, you are cloning the array, but not the objects in that array.

To clone an array of objects, use this:

const theLocations = this.state.locations.map(l => Object.assign({}, l));

Once you have your cloned array of objects, just set the name like this:

theLocations[id].name = "newName!!!!";

Another error here is that you are saving theLocations as a new property in your state object. You need to set locations as the key in your setState function:

this.setState({locations: theLocations}, () => {});

Complete code:

selectLocationHandler = (id) => {
    const theLocations = this.state.locations.map(l => Object.assign({}, l));
    theLocations[id].name = "newName!!!!";
    this.setState({locations: theLocations}, () => {
      console.log(this.state.locations[id].name + " it worksss");
    });
}