How to setState a specific value of a particular parameter in reactjs

Question

this.state = {
  array: [1, 2, 3],
  objects: [{ id: 1 }, { id: 2 }, { id: 3 }]
}

How can I change the specific value of an object or array in the state without setStating the whole array/object?

something like

this.setState({ array[2]: 5 })
this.setState({ object[0].id: 0 })

There are some options to do it, but basically it's important to understand that this is not a stupid obligation, but it's done in ReactJs by purpose, to mark this object as a changed object to cause new render. — yoni
– yoni, Commented Aug 12, 2020 at 8:55
Trying to understand your intention. You sounded like intentionally mutating the object/array? — Isaac
– Isaac, Commented Aug 12, 2020 at 9:45
@Isaac I was meant to copy the whole object/array. Thanks to the community now I know my mistake. — blue edge
– blue edge, Commented Aug 12, 2020 at 9:55

hgb123 · Accepted Answer · 2020-08-12 08:37:07Z

2

You could use a helper function to set an element at an index and return that newly updated array

const array = [1, 2, 3]
const object = [{id: 1}, {id: 2}, {id: 3}]

const setElementAtIndex = (index, value, array) => [
  ...array.slice(0, index),
  value,
  ...array.slice(index + 1)
]

console.log(setElementAtIndex(0, 99, array))
console.log(setElementAtIndex(1, 99, array))
console.log(setElementAtIndex(2, 99, array))
console.log(setElementAtIndex(0, { ...object[0], id: 0 }, object))

this.setState({ array: setElementAtIndex(2, 5, array) })
this.setState({ object: setElementAtIndex(0, { ...object[0], id: 0 }, object) })

answered Aug 12, 2020 at 8:37

hgb123

14.9k3 gold badges24 silver badges43 bronze badges

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

2 Comments

blue edge Over a year ago

I thought of that initially but I tried finding a more efficient way. I tried finding an inbuilt method for this ( if exist). Is there any better way other than just duplication the whole object

hgb123 Over a year ago

IMO, when working with array and object, we should return a copy (at least shallow one) of the updated to avoid mutation

bertdida · Accepted Answer · 2020-08-12 08:42:50Z

1

I would use map.

const state = {
     array: [1,2,3],
     objects: [{id: 1}, {id: 2}, {id: 3}]
}

const newArray = state.array.map((v, i) => i === 2 ? 5 : v);
const newObjects = state.objects.map((v, i) => i === 0 ? {...v, id: 0} : v);

console.log(newArray);
console.log(newObjects);

// this.setState({ ...this.state, array: newArray });
// this.setState({ ...this.state, objects: newObjects });

answered Aug 12, 2020 at 8:42

bertdida

5,3282 gold badges19 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to setState a specific value of a particular parameter in reactjs

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