Correct way to push into state array

Question

I seem to be having issues pushing data into a state array. I am trying to achieve it this way:

this.setState({ myArray: this.state.myArray.push('new value') })

But I believe this is incorrect way and causes issues with mutability?

Foamflower

Array.push returns the new length of the array instead of returning new array which causes issue – Graziano

Answer 1

Functional Components & React Hooks

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

Push value at the end:

setArray(oldArray => [...oldArray,newValue] );

Push value at the start:

setArray(oldArray => [newValue,...oldArray] );

Iguana

what do I do if I have an array of objects to add to an existing array? – Disconsolate

Short modification - the snippet for push value at the beginning shall be: setArray(oldArray => [newValue,...oldArray] ); – Mauri

@SouvikRay you can use Array.concat to merge two arrays and return new array. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – Graziano

Answer 2

Using es6 it can be done like this:

this.setState({ myArray: [...this.state.myArray, 'new value'] }) //simple value
this.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) //another array

Spread syntax

Attwood

I did the same, there are two cases myArray can have values and it won't. so in that, if it has already values, it works perfectly fine. But in no data..it does not update state with 'new value'. Any soln ? – Fasciation

It should work with any arrays, doesn't matter if it has values or not it will be destructured anyway. Maybe there is something wrong in other place. Could you please show an example of your code? – Attwood

hi Please refer my comment under @Tamas answer. It was just a sample in console. I tried myArray: [...this.state.myArray, 'new value'] to update my state array.But it concats only the last value.Could you plz tell me the solution? – Adena

@Adena I’m not sure if your issue is related to this question, try to ask a separate question and describe the expected behavior and I’ll try to help you. – Attwood

Per the React docs: "Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state." In the case of modifying an array, since the array already exists as a property of this.state and you need to reference its value to set a new value, you should use the form of setState() that accepts a function with the previous state as an argument. Example: this.setState(prevState => ({ myArray: [...this.state.myArray, 'new value'] })); See: reactjs.org/docs/… – Scrivings

how can also do this for an array response of an API fetch? – Lingonberry

Are there any advantages/disadvantages for using spread syntax over concat() – Submariner

@Scrivings Surely, you would need to refer to prevState, instead of this.state.myArray in your call, otherwise there's no point to using the form you are suggesting: this.setState(prevState => ({ myArray: [...prevState.myArray, 'new value'] })); – Muzzy

Answer 3

Array push returns length

this.state.myArray.push('new value') returns the length of the extended array, instead of the array itself.Array.prototype.push().

I guess you expect the returned value to be the array.

Immutability

It seems it's rather the behaviour of React:

NEVER mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.React.Component.

I guess, you would do it like this (not familiar with React):

var joined = this.state.myArray.concat('new value');
this.setState({ myArray: joined })

Drambuie

When I do console.log(this.state.myArray) it's always one behind. Any idea why? – Aundreaaunson

@Aundreaaunson Well, I don't use React too much unfortunately. But the docs say: setState() enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state. So I guess it's just not updated at that moment right after setting it. Could You please post a code example, where we can see which point You are setting and logging it, please? – Demott

Thanks for the response. It's async so it won't show you the changes right away. However setState does have a callback which did display the correct value. Thanks again. – Aundreaaunson

w3schools.com/jsref/jsref_concat_array.asp concat concatenates two arrays (not array and string) , .concat('new value'); should be .concat(['new value']); – Rail

@ManoharReddyPoreddy Non-array values are perfectly valid for the concat() method. See: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… (Arrays and/or values to concatenate into a new array.) – Demott

If you simply do this.state.myArray.push('new values') will that trigger a re-render like how setState would? – Attainment

@JoyceLee I'm not experienced with ReactJS, so I can't tell for sure, but frontend frameworks usually recognize modifications originating from the variable's method (push in this case). Frameworks tend to fail when you re-assign value to the variable. – Demott

Answer 4

Never recommended to mutate the state directly.

The recommended approach in later React versions is to use an updater function when modifying states to prevent race conditions:

Push string to end of the array

this.setState(prevState => ({
  myArray: [...prevState.myArray, "new value"]
}))

Push string to beginning of the array

this.setState(prevState => ({
  myArray: ["new value", ...prevState.myArray]
}))

Push object to end of the array

this.setState(prevState => ({
  myArray: [...prevState.myArray, {"name": "object"}]
}))

Push object to beginning of the array

this.setState(prevState => ({
  myArray: [ {"name": "object"}, ...prevState.myArray]
}))

Siva

I used this answer. It also works for prepending into the array: this.setState((prevState) => ({ myArray: [values, ...prevState.myArray], })); – Proponent

this is a much better approach than the accepted answer and does it the way React documentation recommends. – Wrasse

Definitely +1ing this because the other answers don't follow the latest guidelines of using callbacks if mutating state with itself. – Vomitory

how to add another array objects in state array? – Peddler

This creates a new array that becomes myArray: updatedContents rather than just leaving it as an array of the updated contents. If you're mapping the original array, this will cause an error due to the new structure. Is that intentional? – Zygoma

To prevent what I noted above: myArray((prevState) => [...prevState, ...newContents]); – Zygoma

Answer 5

You should not be operating the state at all. At least, not directly. If you want to update your array, you'll want to do something like this.

var newStateArray = this.state.myArray.slice();
newStateArray.push('new value');
this.setState(myArray: newStateArray);

Working on the state object directly is not desirable. You can also take a look at React's immutability helpers.

https://facebook.github.io/react/docs/update.html

Shutout

I believe this answer to be the correct one although I would have liked to know why we can't operate on state, i.e. why it is not desirable. After a little digging I found the following React tutorial - Why Immutability is Important, which helped to fill in the missing info and the tutorial also uses .slice() to create a new array and preserve immutability. Thanks for the help. – Annunciate

Answer 6

Here you can not push the object to a state array like this. You can push like your way in normal array. Here you have to set the state,

this.setState({ 
     myArray: [...this.state.myArray, 'new value'] 
})

Pectin

Answer 7

You can use .concat method to create copy of your array with new data:

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

But beware of special behaviour of .concat method when passing arrays - [1, 2].concat(['foo', 3], 'bar') will result in [1, 2, 'foo', 3, 'bar'].

Bearded

Answer 8

Using react hooks, you can do following way

const [countryList, setCountries] = useState([]);


setCountries((countryList) => [
        ...countryList,
        "India",
      ]);

Dennadennard

what do I do if I have an array of objects to add to an existing array? – Disconsolate

setCountries((countryList) => [ ...countryList, {id:1, name:'india'}, ]); – Dennadennard

Answer 9

This Code work for me :

fetch('http://localhost:8080')
  .then(response => response.json())
  .then(json => {
  this.setState({mystate: this.state.mystate.push.apply(this.state.mystate, json)})
})

Pneumonectomy

Welcome to Stack Overflow! Please don't answer just with source code. Try to provide a nice description about how your solution works. See: How do I write a good answer?. Thanks – Ynes

I tried this but to no avail. Here's my code fetch(`api.openweathermap.org/data/2.5/forecast?q=${this.searchBox.value + KEY} `) .then( response => response.json() ) .then( data => { this.setState({ reports: this.state.reports.push.apply(this.state.reports, data.list)}); }); – Lingonberry

and i firstly initialized state as an empty array i.e this.state = { reports=[] }...pls i'll like to know what i'm doing wrong – Lingonberry

@Hamid Hosseinpour – Lingonberry

Answer 10

  setState([...prevState, {
    label: newState.name,
    value: newState.id
  }]);

Was working with the dropdowns and wanted to implement this scenario there, i found this simple solution for dropdown with multiple values.

Checkbook

Answer 11

React-Native

if u also want ur UI (ie. ur flatList) to be up to date, use PrevState: in the example below if user clicks on the button , it is going to add a new object to the list( both in the model and UI)

data: ['shopping','reading'] // declared in constructor
onPress={() => {this.setState((prevState, props) => {
return {data: [new obj].concat(prevState.data) };
})}}. 

Throne

Answer 12

In the following way we can check and update the objects

this.setState(prevState => ({
    Chart: this.state.Chart.length !== 0 ? [...prevState.Chart,data[data.length - 1]] : data
}));

Nabalas

Answer 13

If you use:

const[myArr, setMyArr] = useState([]);

for add:

setMyArr([...myArr, value]);

and for remove:

let index = myArr.indexOf(value);
if(index !== -1)
    setPatch([...myArr.slice(0, index), ...myArr.slice(index, myArr.length-1)]);

Semanteme

Answer 14

you are breaking React principles, you should clone the old state then merge it with the new data, you shouldn't manipulate your state directly, your code should go like this

fetch('http://localhost:8080').then(response => response.json()).then(json ={this.setState({mystate[...this.state.mystate, json]}) })

Tiptoe

Answer 15

It is the best and simplest way in reactJS if you working in functional components!

setSelectedTaxDec((oldArray) => [...oldArray, dec]);

oldArray is the previousState in which I am pushing the new value dec, is the value I am pushing in this state array

you can avoid pushing the same item again by doing this

if (selectedTaxDec.includes(dec)) {
    return;
  } else {
    setSelectedTaxDec((oldArray) => [...oldArray, dec]);
  }

Meteoric

Answer 16

I guess this is a little bit late for an answer but for those new to react

You can use this tiny package called immer

see this example: https://immerjs.github.io/immer/produce

Lebaron