Why Is This For Loop Not Changing My Array of Objects? JS

Question

Simple question, I am sure that I am being stupid and it is an easy fix. Have an array of objects and want to access each object's vis value and change it through my for loop. I don't understand why it doesn't work.

onSearch = keyWord => {
    let newMarkers = this.state.markers;
    for (let i = 0; i<this.state.markers.length;i++) {
      if (this.state.markers[i].name.toLowerCase().includes(keyWord.toLowerCase())) {
        newMarkers[i].vis = true;
      } else {
        newMarkers[i].vis = false;
      }
    }
    console.log(newMarkers);
    //console.log to see if the vis value has been changed: spoiler alert it hasn't :(
    this.setState({markers: newMarkers});

    console.log(this.state.markers)
  }

Console.log will never show the change to you since setState is async operation. — Harmandeep Singh Kalsi
– Harmandeep Singh Kalsi, Commented Jun 24, 2020 at 3:18
my newMarkers isn't changed either though and it doesn't use setState? — ZKJ
– ZKJ, Commented Jun 24, 2020 at 3:24
I had a typo from fiddling with it too much, it works now. Thank you for your help! — ZKJ
– ZKJ, Commented Jun 24, 2020 at 3:31

see sharper · Accepted Answer · 2020-06-24 03:21:25Z

3

setState is asynchronous. Therefore you need to write the code as follows:

onSearch = keyWord => {
  let newMarkers = this.state.markers;
  for (let i = 0; i<this.state.markers.length;i++) {
    if (this.state.markers[i].name.toLowerCase().includes(keyWord.toLowerCase())) {
      newMarkers[i].vis = true;
    } else {
      newMarkers[i].vis = false;
    }
  }
  console.log(newMarkers);
  this.setState({markers: newMarkers}, () => {
    // use this callback function to do stuff AFTER state changes
    console.log(this.state.markers);
  });
}

answered Jun 24, 2020 at 3:21

see sharper

12.2k8 gold badges53 silver badges68 bronze badges

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

2 Comments

ZKJ Over a year ago

I see, I will keep this in mind in the future, thank you!

Eric McCormick Over a year ago

@ZKJ this is the better answer, as it makes use of the intended API for setState as opposed to a hacky way of stein gifting/parsing data to make a copy.

sibabrat swain · Accepted Answer · 2020-06-24 03:30:02Z

2

It keeps the state unchanged in your case. To overcome you might adapt a quick fix to this. Follow the code.

const jsonNewMarkers = JSON.stringify(newMarkers);
this.setState({markers: JSON.parse(jsonNewMarkers)}, () => {
  // use this callback function to do stuff AFTER state changes
  console.log(this.state.markers);
});

And please try the solution and let me know. It should work as mine it works.

edited Jun 24, 2020 at 3:30

answered Jun 24, 2020 at 3:24

sibabrat swain

1,3789 silver badges21 bronze badges

Collectives™ on Stack Overflow

Why Is This For Loop Not Changing My Array of Objects? JS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related