Push method in React Hooks useState

Question

How to push element inside useState array React hook  Is that as an old method in react state  Or something new   E g  setState push example

User · Answer

if you want to push after specific index you can do as below     const handleAddAfterIndex   index   gt           setTheArray oldItems   gt                const copyItems       oldItems               const finalItems                   for  let i   0  i  lt  copyItems length  i    1                    if  i     index                        finalItems push copyItems i                        finalItems push newItem                     else                       finalItems push copyItems i                                                return finalItems

User · Answer

When you use useState  you can get an update method for the state item  const  theArray  setTheArray    useState initialArray    then  when you want to add a new element  you use that function and pass in the new array or a function that will create the new array  Normally the latter  since state updates are asynchronous and sometimes batched  setTheArray oldArray   gt      oldArray  newElement     Sometimes you can get away without using that callback form  if you only update the array in handlers for certain specific user events like click  but not like mousemove   setTheArray     theArray  newElement     The events for which React ensures that rendering is flushed are the  quot discrete events quot  listed here  Live Example  passing a callback into setTheArray    x000D   x000D  const  useState  useCallback    React  function Example         const  theArray  setTheArray    useState          const addEntryClick        gt            setTheArray oldArray   gt      oldArray   Entry   oldArray length                 return            lt input type  button  onClick  addEntryClick  value  Add    gt            lt div gt  theArray map entry   gt             lt div gt  entry  lt  div gt                      lt  div gt            ReactDOM render       lt Example   gt       document getElementById  root      x000D   lt div id  root  gt  lt  div gt   lt script src  https   cdnjs cloudflare com ajax libs react 16 8 1 umd react production min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 8 1 umd react-dom production min js  gt  lt  script gt  x000D   x000D   x000D   Because the only update to theArray in there is the one in a click event  one of the  quot discrete quot  events   I could get away with a direct update in addEntry   x000D   x000D  const  useState  useCallback    React  function Example         const  theArray  setTheArray    useState          const addEntryClick        gt            setTheArray     theArray   Entry   theArray length                 return            lt input type  button  onClick  addEntryClick  value  Add    gt            lt div gt  theArray map entry   gt             lt div gt  entry  lt  div gt                      lt  div gt            ReactDOM render       lt Example   gt       document getElementById  root      x000D   lt div id  root  gt  lt  div gt   lt script src  https   cdnjs cloudflare com ajax libs react 16 8 1 umd react production min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 8 1 umd react-dom production min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

To expand a little further  here are some common examples  Starting with   const  theArray  setTheArray    useState initialArray   const  theObject  setTheObject    useState initialObject     Push element at end of array  setTheArray prevArray   gt      prevArray  newValue     Push update element at end of object  setTheObject prevState   gt        prevState  currentOrNewKey  newValue       Push update element at end of array of objects  setTheArray prevState   gt      prevState   currentOrNewKey  newValue       Push element at end of object of arrays  let specificArrayInObject   theObject array slice    specificArrayInObject push newValue   const newObj        theObject   event target name   specificArrayInObject    theObject newObj     Here are some working examples too  https   codesandbox io s reacthooks-push-r991u

User · Answer

Save search term state to React Hooks with spread operator and wrapper function     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        https   medium com javascript-in-plain-english how-to-add-to-an-array-in-react-state-3d08ddb2e1dc

User · Answer

You can append array of Data at the end of custom state    const  vehicleData  setVehicleData    React useState lt any   gt         setVehicleData old   gt      old     newArrayData     For example  In below  you appear an example of axios    useEffect      gt        const fetchData   async      gt          const result   await axios                      url   http   localhost 4000 api vehicle page   page   1  amp pageSize 10             method   get                            setVehicleData old   gt      old     result data data                fetchData          page

User · Answer

setTheArray     theArray  newElement    is the simplest answer but be careful for the mutation of items in theArray  Use deep cloning of array items

User · Answer

Most recommended method is using wrapper function and spread operator together  For example  if you have initialized a state called name like this   const  names  setNames     useState      You can push to this array like this       setNames names   gt      names  newName     Hope that helps

User · Answer

I tried the above methods for pushing an object into an array of objects in useState but had the following error when using TypeScript   Type  TxBacklog     undefined  must have a  Symbol iterator  method that returns an iterator ts 2488   The setup for the tsconfig json was apparently right        quot compilerOptions quot         quot target quot    quot es6 quot       quot lib quot            quot dom quot          quot dom iterable quot          quot esnext quot          quot es6 quot       This workaround solved the problem  my sample code   Interface     interface TxBacklog         status  string        txHash  string        State variable      const  txBacklog  setTxBacklog    React useState lt TxBacklog   gt      Push new object into array         Define new object to be added     const newTx            txHash   0x368eb7269eb88ba86            status   pending                Push new object into array      txBacklog            setTxBacklog prevState   gt       prevState   newTx             setTxBacklog  newTx

User · Answer

The same way you do it with  normal  state in React class components    example   function App       const  state  setState    useState         return        lt div gt         lt p gt You clicked  state join   and     lt  p gt          destructuring        lt button onClick       gt  setState     state   again     gt Click me lt  button gt          old way        lt button onClick       gt  setState state concat  again     gt Click me lt  button gt       lt  div gt

[javascript] Push method in React Hooks (useState)?

Examples related to javascript

Examples related to reactjs

Examples related to react-hooks