What is the best way to add a value to an array in state

Question

I have an array in state, let's say this.state.arr. I want to add something to this state property, and then change some more properties.

Option 1

onChange(event){
    this.state.arr.push('newvalue');
    ...
    this.setState({some:'val',arr:this.state.arr})
}

Option 2

onChange(event){
    var newArr = this.state.arr;
    ...
    newArr.push('newvalue');
    ...
    this.setState({some:'val',arr:newArr})
}

So... I know this.state is supposed to be treated immutable, but is it ok to use it like in option 1 where I still set the state from it, or do I need to go with something like option 2, and thus always first making a copy in memory?

see this stackoverflow.com/questions/26253351/… and this stackoverflow.com/questions/23966438/… — nilgun
– nilgun, Commented Oct 22, 2014 at 11:02
A third option could be the best : use immutability helper provided by React : facebook.github.io/react/docs/update.html — rebe100x
– rebe100x, Commented Jan 27, 2016 at 12:33

Kutsan Kaplan · Accepted Answer · 2016-11-08 17:46:33Z

121

For now, this is the best way.

this.setState(previousState => ({
    myArray: [...previousState.myArray, 'new value']
}));

answered Nov 8, 2016 at 17:46

Kutsan Kaplan

1,8814 gold badges18 silver badges22 bronze badges

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

5 Comments

Gus Over a year ago

This worked for me. It also works for prepending into the array: this.setState((prevState) => ({ myArray: [values, ...prevState.myArray], }));

Liu Hantao Over a year ago

If I want 'new value' to be a parameter that I passed in. Do I simply do onChange = (id) => { this.setState(prevState => ({ tags: [...prevState.tags, id] })); }

Pubudu Jayasanka Over a year ago

How to add new value to a specific position in the array?

ggorlen Over a year ago

@PubuduJayasanka setFoo(prevState => [...prevState.slice(0, pos), newItem, ...prevState.slice(pos)]) with hooks, but you can use a similar spread pattern on a specific key in a class component.

huykon225 Over a year ago

how to only add unique value?

Butters · Accepted Answer · 2014-10-27 15:12:57Z

67

Both of the options you provided are the same. Both of them will still point to the same object in memory and have the same array values. You should treat the state object as immutable as you said, however you need to re-create the array so its pointing to a new object, set the new item, then reset the state. Example:

onChange(event){
    var newArray = this.state.arr.slice();    
    newArray.push("new value");   
    this.setState({arr:newArray})
}

answered Oct 27, 2014 at 15:12

Butters

8507 silver badges7 bronze badges

2 Comments

Butters Over a year ago

Slice will create a new shallow copy of the array, making it immutable.

Dave Newton Over a year ago

@Butters FWIW, that doesn't make it immutable since objects in the array can still be mutated. Here it's strings so it's not an issue, but in the general case, slice still allows in situ updates, bypassing the normal state checking.

TiagoLr · Accepted Answer · 2016-11-29 10:55:05Z

61

Another simple way using concat:

this.setState({
  arr: this.state.arr.concat('new value')
})

answered Nov 29, 2016 at 10:55

TiagoLr

3,10426 silver badges18 bronze badges

3 Comments

Jesper We Over a year ago

I find this both the most expressive and least verbose method.

Flion Over a year ago

Changed this to the accepted answer because not only is it the last verbose, it's also the fastest solution according to jsperf

peter.swallow Over a year ago

This could cause the state to get out of sync, if the setState is not called in the expected order. Better to use the setState(prevState, ...).

JamieD · Accepted Answer · 2019-06-28 12:21:22Z

50

If you are using ES6 syntax you can use the spread operator to add new items to an existing array as a one liner.

// Append an array
const newArr = [1,2,3,4]
this.setState(prevState => ({
  arr: [...prevState.arr, ...newArr]
}));

// Append a single item
this.setState(prevState => ({
  arr: [...prevState.arr, 'new item']
}));

edited Jun 28, 2019 at 12:21

answered Jun 22, 2017 at 12:57

JamieD

2,7472 gold badges20 silver badges19 bronze badges

Comments

Gass · Accepted Answer · 2022-02-12 09:26:16Z

40

Short way with useState hook:

const [value, setValue] = useState([])
setValue([...value, newvalue])

edited Feb 12, 2022 at 9:26

Gass

9,6405 gold badges47 silver badges53 bronze badges

answered May 28, 2021 at 4:28

Tony

5734 silver badges7 bronze badges

Comments

Mas dem · Accepted Answer · 2019-01-29 12:09:02Z

9

the best away now.

this.setState({ myArr: [...this.state.myArr, new_value] })

answered Jan 29, 2019 at 12:09

Mas dem

1071 silver badge1 bronze badge

1 Comment

Pubudu Jayasanka Over a year ago

I am wondering how can I insert new value to the middle of the array instead of adding it to the end?

Codex · Accepted Answer · 2020-03-21 20:21:22Z

9

For functional components with hooks

const [searches, setSearches] = useState([]);

// Using .concat(), no wrapper function (not recommended)
setSearches(searches.concat(query));

// Using .concat(), wrapper function (recommended)
setSearches(searches => searches.concat(query));

// Spread operator, no wrapper function (not recommended)
setSearches([...searches, query]);

// Spread operator, wrapper function (recommended)
setSearches(searches => [...searches, query]);

source: https://medium.com/javascript-in-plain-english/how-to-add-to-an-array-in-react-state-3d08ddb2e1dc

answered Mar 21, 2020 at 20:21

Codex

1,2812 gold badges23 silver badges32 bronze badges

1 Comment

EthanNeedsHelpCoding Over a year ago

"setSearches(searches => searches.concat(query)); " is by far the best solution in 2021, thank you king.

SAMAR · Accepted Answer · 2019-05-09 10:49:03Z

5

onChange() {
     const { arr } = this.state;
     let tempArr = [...arr];
     tempArr.push('newvalue');
     this.setState({
       arr: tempArr
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

answered May 9, 2019 at 10:49

SAMAR

591 silver badge8 bronze badges

Comments

Humayoun Alamgir · Accepted Answer · 2022-02-06 21:31:43Z

5

React hook - useState (2022)

const [array, setArray] = useState([]);

const handleChange = (newValue) => {
  setArray((array) => [...array, newValue]);
};

answered Feb 6, 2022 at 21:31

Humayoun Alamgir

1652 silver badges3 bronze badges

Comments

Harshit Singhai · Accepted Answer · 2018-07-06 06:06:47Z

2

handleValueChange = (value) => {
      let myArr= [...this.state.myArr]
      myArr.push(value)
      this.setState({
         myArr
     })

This might do the work.

answered Jul 6, 2018 at 6:06

Harshit Singhai

1,28812 silver badges7 bronze badges

Comments

Ivan K. · Accepted Answer · 2023-01-19 00:04:04Z

2

const [array, setArray] = useState([]);

const handleChange = (newValue) => {
  setArray((prevState) => [...prevState, newValue]);
};

If the new state is computed using the previous state, you can pass a function to setState. The function will receive the previous value, and return an updated value.

setState doc.

answered Jan 19, 2023 at 0:04

Ivan K.

1,13413 silver badges12 bronze badges

Comments

Mygel Bergstresser · Accepted Answer · 2018-06-16 01:30:21Z

0

If you want to keep adding a new object to the array i've been using:

_methodName = (para1, para2) => {
  this.setState({
    arr: this.state.arr.concat({para1, para2})
  })
}

answered Jun 16, 2018 at 1:30

Mygel Bergstresser

3321 gold badge5 silver badges15 bronze badges

Comments

Excellent Lawrence · Accepted Answer · 2019-07-24 00:34:22Z

0

This might not directly answer your question but for the sake of those that come with states like the below

 state = {
    currentstate:[
     {
    id: 1 ,
    firstname: 'zinani',
    sex: 'male'

     }
    ]

 }

Solution

const new_value = {
    id: 2 ,
    firstname: 'san',
    sex: 'male'

     }

Replace the current state with the new value

 this.setState({ currentState: [...this.state.currentState, new_array] })

answered Jul 24, 2019 at 0:34

Excellent Lawrence

1,10412 silver badges11 bronze badges

Collectives™ on Stack Overflow

What is the best way to add a value to an array in state

13 Answers 13

5 Comments

2 Comments

3 Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

5 Comments

2 Comments

3 Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related