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

User · Accepted Answer

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

User · Answer

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   gt       myArray      prevState myArray   new value         Push string to beginning of the array  this setState prevState   gt       myArray    new value      prevState myArray        Push object to end of the array  this setState prevState   gt       myArray      prevState myArray    name    object          Push object to beginning of the array  this setState prevState   gt       myArray      name    object       prevState myArray

User · Answer

Using Functional Components and React Hooks const  array setArray    useState       Push value at the end  setArray oldArray   gt      oldArray newValue      Push value at the begging  setArray oldArray   gt   newValue    oldArrays

User · Answer

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

User · Answer

In the following way we can check and update the objects  this setState prevState   gt         Chart  this state Chart length     0       prevState Chart data data length - 1     data

User · Answer

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

User · Answer

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   gt  response json    then json   this setState  mystate    this state mystate  json

User · Answer

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

User · Answer

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       gt   this setState  prevState  props    gt    return  data   new obj  concat prevState data

User · Answer

Using react hooks  you can do following way const  countryList  setCountries    useState        setCountries  countryList    gt               countryList           quot India quot

User · Answer

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

User · Answer

This Code work for me    fetch  http   localhost 8080      then response   gt  response json       then json   gt      this setState  mystate  this state mystate push apply this state mystate  json

[javascript] Correct way to push into state array

Array push returns length

Immutability

Examples related to javascript

Examples related to reactjs

Examples related to immutability