How to add an element to a useState array in React

Question

With the help of code can you tell me How to add an element to a useState array in React?

Answer 1

You can use the spread operator (...) or the functional setState update.

Example:

import { useState } from 'react';

function App() {

    const [items, setItems] = useState([1, 2, 3]);

    const addItem = () => {

        setItems(prevItems => [...prevItems, 4]); // Adding new element

    };

    return (

        <div>

            <button onClick={addItem}>Add Item</button>

            <ul>

                {items.map((item, index) => <li key={index}>{item}</li>)}

            </ul>

        </div>

    );

}

export default App;