React Remove Item From Array

To remove or delete all items from an array, you can use the splice() method or assign an empty array to the original array to delete or remove all items/elements. The splice() method can be used with the starting index and the number of items to remove. If you want to delete all items, use index 0 to array.length. Another option is to assign an empty array to the original array

written

reviewed

updated

How to Remove All Elements from Array in React Js using the `splice` method?

The given code is a React.js component that demonstrates how to remove or delete all items from an array using the splice method.

The component initializes a state variable called items with an array of names.

The deleteAllItems function is triggered when the "Delete All Items" button is clicked. It uses the splice method to remove all elements from the items array by specifying a starting index of 0 and the length of the array.

After modifying the items array, the state is updated using the setItems function with a new array created using the spread operator [...items].

The updated state is then rendered, displaying the modified items array and providing a button to delete all items.

React Delete Item from Array

<script type="text/babel">
        const { useState } = React
        function App() {
             const [items, setItems] = useState(['Tim Cook', 'Satya Nadella', 'Elon Musk', 'Mark Zuckerberg', 'Jeff Bezos'])

            const deleteAllItems = () => {
                items.splice(0, items.length);
                setItems([...items]); // Update the state with the modified array
            };
            return (
                <div class="container">
                    <h3>React Js Remove or Delete all item from array</h3>
                    <p>Items: {items.join(', ')}</p>
                    <button onClick={deleteAllItems}>Delete All Items</button>
                </div>


            );
        }

        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

Output of React Remove Item from State

Pasted Image

How can you remove or delete all items from an array in React js by reassigning the array?

This React.js code snippet demonstrates how to remove or delete all items from an array by reassigning the array using the useState hook. Initially, the items state variable is set to an array containing several names.

The deleteAllItems function is called when the "Delete all items" button is clicked. Inside this function, the setItems function is used to reassign the items state variable to an empty array, effectively removing all items from it.

The updated array is then reflected in the rendered output, displaying an empty list of items.

React Remove Element from Array

<script type="text/babel">
        const { useState } = React
        function App() {
            const [items, setItems] = useState(['Tim Cook', 'Satya Nadella', 'Elon Musk', 'Mark Zuckerberg', 'Jeff Bezos'])

            const deleteAllItems = () => {
                setItems([]);
            };

            return (
                <div className="container">
                    <h3>React Js Remove or Delete all items from the array</h3>
                    <p>Items: {items.join(', ')}</p>
                    <button onClick={deleteAllItems}>Delete all items</button>
                </div>
            );
        }

        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

Output of React Js Remove/Delete all items from array

Releated Tutorials

👉 Vue Js Remove or Delete All item from Array

React JS Tutorial