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");
    });
}

What are you trying to do in selectLocationHandler function? Are you trying to handle the new item in the array? — Liam
– Liam, Commented Apr 25, 2018 at 20:14
@Liam I try to handle the state change in this function after a clickEvent. — Dave_888
– Dave_888, Commented Apr 25, 2018 at 20:25

Kevin Smith · Accepted Answer · 2018-04-25 20:42:42Z

15

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");
    });
}

answered Apr 25, 2018 at 20:42

Kevin Smith

2771 silver badge5 bronze badges

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

6 Comments

Dave_888 Over a year ago

thankss a for the explenations! :-) So when I use [...this.state.locations] i'm not cloning a array of objects? I thought with the spread syntax I can clone the elements inside the array.

Kevin Smith Over a year ago

Correct. It only clones the array, and not the objects inside of it. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… And you're welcome!

David L Over a year ago

[...this.state.locations] does clone the array and objects inside it.

Bergi Over a year ago

@Wei no, it does not clone the objects.

Bergi Over a year ago

@KevinSmith Surely theLocations[id] = {...theLocations[id], name:"newName!!!!"}; does create a copy of the location object?

|

Alexandr Nituleac · Accepted Answer · 2018-04-25 20:18:20Z

3

In setState you should specify name of property in the state which you want to update. In your case {theLocations} means that you have the next object {theLocations: theLocations}. You need to change it to: this.setState({locations: theLocations}, () => { console.log(this.state.locations[id].name + " it worksss"); });

answered Apr 25, 2018 at 20:18

Alexandr Nituleac

312 bronze badges

Comments

Gonki · Accepted Answer · 2021-02-14 06:01:49Z

0

Reset the array to empty then set the state to the new value:

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

answered Feb 14, 2021 at 6:01

Gonki

7461 gold badge10 silver badges22 bronze badges

Collectives™ on Stack Overflow

setState not working for updating an array in React

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related