Correct modification of state arrays in React js

Question

I want to add an element to the end of a state array  is this the correct way to do it  this state arrayvar push newelement   this setState   arrayvar this state arrayvar      I m concerned that modifying the array in-place with push might cause trouble - is it safe  The alternative of making a copy of the array  and setStateing that seems wasteful

User · Answer

I am trying to push value in an array state and set value like this and define state array and push value by map function    this state             createJob              totalAmount Number 0          your API JSON Array map       gt                    this setState  totalAmount this state totalAmount      your API JSON price                   this state createJob push   id     id  price    your API JSON price                    return this setState  createJob  this state createJob

User · Answer

I was having a similar issue when I wanted to modify the array state while retaining the position of the element in the array This is a function to toggle between like and unlike      const liker    index    gt          setData  prevState    gt                prevState index  like    prevState index  like              return     prevState                as we can say the function takes the index of the element in the array state  and we go ahead and modify the old state and rebuild the state tree

User · Answer

If you are using functional components in React const  cars  setCars    useState      name   Audi     type   sedan         name   BMW     type   sedan            const newCar       name   Benz     type   sedan     const updatedCarsArray       cars  newCar    setCars updatedCarsArray

User · Answer

Easiest  if you are using ES6  initialArray    1  2  3    newArray        initialArray  4       -- gt   1 2 3 4   New array will be  1 2 3 4  to update your state in React this setState     arrayvar     this state arrayvar  newelement       Learn more about array destructuring

User · Answer

this setState     arrayvar      this state arrayvar     newelement

User · Answer

Here s a 2020  Reactjs Hook example that I thought could help others  I am using it to add new rows to a Reactjs table  Let me know if I could improve on something   Adding a new element to a functional state component   Define the state data       const  data  setData    useState             id  1  name   John   age  16              id  2  name   Jane   age  22              id  3  name   Josh   age  21             Have a button trigger a function to add a new element   lt Button        pass the current state data to the handleAdd function so we can append to it      onClick       gt  handleAdd data   gt      Add a row  lt  Button gt    function handleAdd currentData                return last data array element         let lastDataObject   currentTableData currentTableData length - 1              assign last elements ID to a variable          let lastID   Object values lastDataObject  0               build a new element with a new ID based off the last element in the array         let newDataElement                 id  lastID   1              name   Jill               age  55                        build a new state object          const newStateData       currentData  newDataElement               update the state         setData newStateData               print newly updated state         for  const element of newStateData                console log  New Data      Object values element  join

User · Answer

As  nilgun mentioned in the comment  you can use the react immutability helpers  I ve found this to be super useful   From the docs   Simple push  var initialArray    1  2  3   var newArray   update initialArray    push   4          gt   1  2  3  4    initialArray is still  1  2  3

User · Answer

The React docs says      Treat this state as if it were immutable    Your push will mutate the state directly and that could potentially lead to error prone code  even if you are  resetting  the state again afterwards  F ex  it could lead to that some lifecycle methods like componentDidUpdate won   t trigger   The recommended approach in later React versions is to use an updater function when modifying states to prevent race conditions   this setState prevState   gt       arrayvar      prevState arrayvar  newelement        The memory  waste  is not an issue compared to the errors you might face using non-standard state modifications   Alternative syntax for earlier React versions  You can use concat to get a clean syntax since it returns a new array   this setState      arrayvar  this state arrayvar concat  newelement        In ES6 you can use the Spread Operator   this setState     arrayvar      this state arrayvar  newelement

User · Answer

------------------code is return in typescript   const updateMyData1    rowIndex any  columnId any  value any    gt         setItems old   gt  old map  row  index    gt            if  index     rowIndex            return Object assign Object assign     old rowIndex       columnId   value               return row

User · Answer

If you are using functional component please use this as below   const  chatHistory  setChatHistory    useState         define the state  const chatHistoryList       chatHistory    from   me    message  e target value       new array need to update setChatHistory chatHistoryList      update the state

User · Answer

React may batch updates  and therefore the correct approach is to provide setState with a function that performs the update   For the React update addon  the following will reliably work   this setState  state   gt  update state   array    push   4          or for concat     this setState  state   gt         array  state array concat  4          The following shows what https   jsbin com mofekakuqi 7 edit js output as an example of what happens if you get it wrong   The setTimeout   invocation correctly adds three items because React will not batch updates within a setTimeout callback  see https   groups google com d msg reactjs G6pljvpTGX0 0ihYw2zK9dEJ    The buggy onClick will only add  Third   but the fixed one  will add F  S and T as expected   class List extends React Component     constructor props        super props        this state           array                setTimeout this addSome  500          addSome        gt          this setState          update this state   array    push    First              this setState          update this state   array    push    Second              this setState          update this state   array    push    Third                  addSomeFixed        gt          this setState  state   gt           update state   array    push    F              this setState  state   gt           update state   array    push    S              this setState  state   gt           update state   array    push    T                    render          const list   this state array map  item  i    gt          return  lt li key  i  gt  item  lt  li gt                 console log this state        return          lt div className  list  gt           lt button onClick  this addSome  gt add three lt  button gt           lt button onClick  this addSomeFixed  gt add three  fixed  lt  button gt           lt ul gt           list           lt  ul gt         lt  div gt                  ReactDOM render  lt List   gt   document getElementById  app

User · Answer

Option one is using this setState prevState   gt       arrayvar      prevState arrayvar  newelement       Option 2  this setState      arrayvar  this state arrayvar concat  newelement

User · Answer

For added new element into the array  push   should be the answer   For remove element and update state of array  below code works for me  splice index  1  can not work   const  arrayState  setArrayState    React useState lt any   gt               index is the index for the element you want to remove const newArrayState   arrayState filter  value  theIndex    gt   return index     theIndex    setArrayState newArrayState

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

User · Answer

This worked for me to add an array within an array  this setState prevState   gt         component  prevState component concat new Array   new    new

User · Answer

The simplest way with ES6   this setState prevState   gt         array      prevState array  newElement

[javascript] Correct modification of state arrays in React.js

Examples related to javascript

Examples related to reactjs