Update Arrays with React useState Hook Without Push

Update Arrays with React useState Hook Without Push

In this article, we'll look at how to update arrays using the React useState() hook and without the Array object's push() method. Rather than that, we'll use the spread operator.

Creating an Array state with useState()

First, let's see how to use the useState() hook for creating an array state variable.

import React from "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>
<div id="root"></div>

<script>
const { useState } = React;

const App = () => {
    const [myArray, updateMyArray] = useState([]);

    const onClick = () => {
        updateMyArray( arr => [...arr, `${arr.length}`]);
    };
    return [
        <input type="button" onClick={ onClick } value="Update" />,

        <div>{myArray.map( e =>
          <div>{ e }</div>
        )}
        </div>
    ];
}

ReactDOM.render(
    <App />,
    document.getElementById("root")
);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="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.

Here we are using React 16.8 but you can also use the latest React version available. At this time, you can already upgrade to React 18.

Conclusion

In this example, we saw how to update array state in React by using the useState hook and the Spread operator rather than the push() method that is normally used to add new elements to arrays in JavaScript.

  • Date: