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

User · Accepted Answer

Another simple way using concat   this setState     arr  this state arr concat  new value

User · Answer

handleValueChange    value    gt          let myArr      this state myArr        myArr push value        this setState            myArr           This might do the work

User · Answer

the best away now   this setState   myArr      this state myArr  new value

User · Answer

For now  this is the best way   this setState previousState   gt         myArray      previousState myArray   new value

User · Answer

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

User · Answer

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   gt       arr      prevState arr     newArr           Append a single item this setState prevState   gt       arr      prevState arr   new item

User · Answer

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

User · Answer

If you want to keep adding a new object to the array i ve been using    methodName    para1  para2    gt      this setState       arr  this state arr concat  para1  para2

User · Answer

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   gt  searches concat query        Spread operator  no wrapper function  not recommended  setSearches     searches  query        Spread operator  wrapper function  recommended  setSearches searches   gt      searches  query       source  https   medium com javascript-in-plain-english how-to-add-to-an-array-in-react-state-3d08ddb2e1dc

User · Answer

x000D   x000D  onChange     x000D       const   arr     this state  x000D       let tempArr       arr   x000D       tempArr push  newvalue    x000D       this setState   x000D         arr  tempArr x000D          x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 6 3 umd react production min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 6 3 umd react-dom production min js  gt  lt  script gt  x000D   x000D   x000D

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

Examples related to memory

Examples related to state

Examples related to reactjs