Replace array element (integer) in state

Question

I have a simple array in React's state, consisting of only integers:

this.state = {
  myArray: [1,2,3]
}

I'm trying to replace a value in an immutable way (value 2 should be replaced by 8):

const valueToReplace = 2
const newValue = 8
const myArray = this.state.myArray
const arrayPosition = myArray.indexOf(valueToReplace)
const newArray = Object.assign([], myArray, {arrayPosition: newValue})

this.setState({myArray: newArray})

But my way doesn't change myArray in state. I think I'm not using Object.assign in the correct way.

Mike Cluck · Accepted Answer · 2017-05-10 20:50:02Z

2

You can use Array.prototype.slice to copy the array, mutate your copy, then assign it. Since you're creating a new array instead of modifying an existing one, you're still safe from mutation issues.

const valueToReplace = 2
const newValue = 8
const newArray = this.state.myArray.slice() // copy
const arrayPosition = newArray.indexOf(valueToReplace)
newArray[arrayPosition] = newValue

this.setState({myArray: newArray})

answered May 10, 2017 at 20:50

Mike Cluck

32.6k13 gold badges84 silver badges95 bronze badges

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

Comments

Stavros Zavrakas · Accepted Answer · 2017-05-10 20:51:16Z

1

It is better to create a clone of an array first and then replace the value:

const valueToReplace = 2
const newValue = 8
const myArray = this.state.myArray.slice(0);
const arrayPosition = myArray.indexOf(valueToReplace)
myArray[arrayPosition] = newValue

this.setState({myArray: newArray})

The Object.assign just clones and object/array into another var and is not changing the value within the array.

answered May 10, 2017 at 20:51

Stavros Zavrakas

3,1251 gold badge20 silver badges30 bronze badges

Collectives™ on Stack Overflow

Replace array element (integer) in state

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