);
          }}>Add</button>
          <ul>
            {artists.map(artist => (
              <li key={artist.id}>{artist.name}</li>
            ))}
          </ul>
        </>
      );
    }
    
    

Show more

Instead, create a _new_ array which contains the existing items _and_ a new
item at the end. There are multiple ways to do this, but the easiest one is to
use the ` ... ` [ array spread ](https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals)
syntax:

    
    
    setArtists( // Replace the state  
    
    
      [ // with a new array  
    
    
        ...artists, // that contains all the old items  
    
    
        { id: nextId++, name: name } // and one new item at the end  
    
    
      ]  
    
    
    );

Now it works correctly:

App.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    import { useState } from 'react';
    
    let nextId = 0;
    
    export default function List() {
      const [name, setName] = useState('');
      const [artists, setArtists] = useState([]);
    
      return (
        <>
          <h1>Inspiring sculptors:</h1>
          <input
            value={name}
            onChange={e => setName(e.target.value)}
          />
          <button onClick={() => {
            setArtists([
              ...artists,
              { id: nextId++, name: name }
            ]);
          }}>Add</button>
          <ul>
            {artists.map(artist => (
              <li key={artist.id}>{artist.name}</li>
            ))}
          </ul>
        </>
      );
    }
    
    

Show more

The array spread syntax also lets you prepend an item by placing it _before_
the original ` ...artists ` :

    
    
    setArtists([  
    
    
      { id: nextId++, name: name },  
    
    
      ...artists // Put old items at the end  
    
    
    ]);

In this way, spread can do the job of both ` push() ` by adding to the end of
an array and ` unshift() ` by adding to the beginning of an array. Try it in
the sandbox above!

###  Removing from an array

The easiest way to remove an item from an array is to _filter it out_ . In
other words, you will produce a new array that will not contain that item. To
do this, use the ` filter ` method, for example:

App.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    import { useState } from 'react';
    
    let initialArtists = [
      { id: 0, name: 'Marta Colvin Andrade' },
      { id: 1, name: 'Lamidi Olonade Fakeye'},
      { id: 2, name: 'Louise Nevelson'},
    ];
    
    export default function List() {
      const [artists, setArtists] = useState(
        initialArtists
      );
    
      return (
        <>
          <h1>Inspiring sculptors:</h1>
          <ul>
            {artists.map(artist => (
              <li key={artist.id}>
                {artist.name}{' '}
                <button onClick={() => {
                  setArtists(
                    artists.filter(a =>
                      a.id !== artist.id
                    )
                  );
                }}>
                  Delete
                </button>
              </li>
            ))}
          </ul>
        </>
      );
    }
    
    

Show more

Click the “Delete” button a few times, and look at its click handler.

    
    
    setArtists(  
    
    
      artists.filter(a => a.id !== artist.id)  
    
    
    );

Here, ` artists.filter(a => a.id !== artist.id) ` means “create an array that
consists of those ` artists ` whose IDs are different from ` artist.id ` ”. In
other words, each artist’s “Delete” button will filter _that_ artist out of
the array, and then request a re-render with the resulting array. Note that `
filter ` does not modify the original array.

###  Transforming an array

If you want