javascript: Update property value in Array() with index as parameter

Question

Currently I've a react function that removes from a Array called rents the current rent perfect. The issue is that I need to update the rent row value called status and set property from 1 to 4 the code below works. I don't seem to get how to get the Index of rent to be able to update it.

removeItem (itemIndex) {
    this.state.rents.splice(itemIndex, 1) // removes the element
    this.setState({rents: this.state.rents}) // sets again the array without the value to the rent prop
    console.log(itemIndex) // itemIndex
}

currently I'm adding this to the code to debug but get this error

console.log(this.state.rents[itemIndex].unique_key)

Stack Trace

TypeError: Cannot read property 'unique_key' of undefined

I need to be able to update the rent property value called status from 1 to 4 and setState again

I really don't understand what you want to do, but if we talk about the code you posted, don't do it. Don't mutate your state like that. — devserkan
– devserkan, Commented Sep 15, 2018 at 3:11
@devserkan have any tutorial example so I could understand, thanks in advance. — Eddwin Paz
– Eddwin Paz, Commented Sep 15, 2018 at 3:19
Don't use splice directly on your state, even better don't use it. Use slice or .filter to create new arrays. Don't assign your state using itself again like you do. You can find a good tutorial in @Thiago Loddi's answer. — devserkan
– devserkan, Commented Sep 15, 2018 at 3:25

Thiago Loddi · Accepted Answer · 2018-09-15 03:19:54Z

2

To elaborate the comments, starting first with the most important:

Like @devserkan said, you should never mutate your state (and props), otherwise you start to see some really weird hard-to-make-sense bugs. When manipulating state, always create a copy of it. You can read more here.

Now for your question:

this.setState is asynchronous, so to get your state's updated value you should use a callback function

const rents = [...this.state.rents]; // create a copy
rents.splice(itemIndex, 1);
this.setState({ rents }, () => {
  console.log(this.state.rents); // this will be up-to-date
});
console.log(this.state.rents); // this won't

answered Sep 15, 2018 at 3:19

Thiago Loddi

2,3705 gold badges23 silver badges36 bronze badges

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

Comments

devserkan · Accepted Answer · 2018-09-15 12:25:20Z

Personally, I like using the filter method to remove items from the state and want to give an alternative solution. As we tried to explain in the comments and @Thiago Loddi's answer, you shouldn't mutate your state like this.

For arrays, use methods like map, filter, slice, concat to create new ones according to the situation. You can also use spread syntax to shallow copy your array. Then set your state using this new one. For objects, you can use Object.assign or spread syntax again to create new ones.

A warning, spread syntax and Object.assign creates shallow copies. If you mutate a nested property of this newly created object, you will mutate the original one. Just keep in mind, for this situation you need a deep copy or you should change the object again without mutating it somehow.

Here is the alternative solution with filter.

removeItem = itemIndex => {
  const newRents = this.state.rents.filter((_, index) => index !== itemIndex);
  this.setState({ rents: newRents });
};

If you want to log this new state, you can use a callback to setState but personally, I like to log the state in the render method. So here is one more alternative :)

render() {
    console.log( this.state.rents );
    ...
}

Collectives™ on Stack Overflow

javascript: Update property value in Array() with index as parameter

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related