Update Arrays with React useState Hook Without Push
In this post we will give you information about Update Arrays with React useState Hook Without Push. Hear we will give you detail about Update Arrays with React useState Hook Without PushAnd how to use it also give you demo for it if it is necessary.
In this article, we’ll see by example how to update arrays via the React hook useState() using the push() method of the Array object.
Creating an Array State with useState()
First, let’s see how to use the useState() hook for creating an array state variable.
importReactfrom"react";const{useState}=React;const[myArray,setMyArray]=useState([]);We destructure the return value of the useState() hook to get a variable that contains the state array and a method for updating the state.
You can’t update the array directly without using the method returned from useState(). In our case, it’s setMyArray().
Adding a New Element to the State Array
Now since the state is an array, how to add a new element to the array?
Normally, we would use the push() method for adding a new element to an array:
myArray.push(1);However, with React, we need to use the method returned from useState to update the array.
We simply, use the update method (In our example it’s setMyArray()) to update the state with a new array that’s created by combining the old array with the new element using JavaScript’ Spread operator.
We can also define a function that creates the new array from the old array and pass it to the useState update method.
setMyArray(oldArray=>[...oldArray,newElement]);The function will have the old array as a first parameter. In case, you want to use the first approach, you need to access the old array from the state object.
Full React Example for Updating a State Array
This is a full example:
<body><divid="root"></div><script>const{useState}=React;constApp=()=>{const[myArray,updateMyArray]=useState([]);constonClick=()=>{updateMyArray(arr=>[...arr,'${arr.length}']);};return[<inputtype="button"onClick={onClick}value="Update"/>,<div>{myArray.map(e=><div>{e}</div>)}</div>];}ReactDOM.render(<App/>,document.getElementById("root"));</script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script></body>We pass in a function to our updateMyArray() method that will take care of providing a new array by concatenating the old array with the new element using the Spread operator. The new element in this example is simply the length of the old array.
Conclusion
In this example, we’ve seen how to update array state in React using the useState hook and the Spread operator instead of the push() method used to normally add new elements to arrays in JavaScript.
Hope this code and post will helped you for implement Update Arrays with React useState Hook Without Push. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs