le(artworkId, nextSeen) {
        setList(list.map(artwork => {
          if (artwork.id === artworkId) {
            return { ...artwork, seen: nextSeen };
          } else {
            return artwork;
          }
        }));
      }
    
      return (
        <>
          <h1>Art Bucket List</h1>
          <h2>My list of art to see:</h2>
          <ItemList
            artworks={list}
            onToggle={handleToggle} />
        </>
      );
    }
    
    function ItemList({ artworks, onToggle }) {
      return (
        <ul>
          {artworks.map(artwork => (
            <li key={artwork.id}>
              <label>
                <input
                  type="checkbox"
                  checked={artwork.seen}
                  onChange={e => {
                    onToggle(
                      artwork.id,
                      e.target.checked
                    );
                  }}
                />
                {artwork.title}
              </label>
            </li>
          ))}
        </ul>
      );
    }
    
    

Show more

If copying arrays in code gets tedious, you can use a library like [ Immer
](https://github.com/immerjs/use-immer) to reduce repetitive code:

package.json  App.js

package.json

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

    
    
    {
      "dependencies": {
        "immer": "1.7.3",
        "react": "latest",
        "react-dom": "latest",
        "react-scripts": "latest",
        "use-immer": "0.5.1"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
      },
      "devDependencies": {}
    }

##  Ready to learn this topic?

Read **[ Updating Arrays in State ](/learn/updating-arrays-in-state) ** to
learn how to update arrays correctly.

[ Read More  ](/learn/updating-arrays-in-state)

* * *

##  What’s next?

Head over to [ Responding to Events ](/learn/responding-to-events) to start
reading this chapter page by page!

Or, if you’re already familiar with these topics, why not read about [
Managing State ](/learn/managing-state) ?

[ Previous  Your UI as a Tree  ](/learn/understanding-your-ui-as-a-tree) [
Next  Responding to Events  ](/learn/responding-to-events)

* * *

How do you like these docs?

[ Take our survey!  ](https://www.surveymonkey.co.uk/r/PYRPF3X)

* * *

[ ](https://opensource.fb.com/)

©  2024

[ Learn React ](/learn)

[ Quick Start ](/learn)

[ Installation ](/learn/installation)

[ Describing the UI ](/learn/describing-the-ui)

[ Adding Interactivity ](/learn/adding-interactivity)

[ Managing State ](/learn/managing-state)

[ Escape Hatches ](/learn/escape-hatches)

[ API Reference ](/reference/react)

[ React APIs ](/reference/react)

[ React DOM APIs ](/reference/react-dom)

[ Community ](/community)

[ Code of Conduct
](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md)

[ Meet the Team ](/community/team)

[ Docs Contributors ](/community/docs-contributors)

[ Acknowledgements ](/community/acknowledgements)

More

[ Blog ](/blog)

[ React Native ](https://reactnative.dev/)

[ Privacy ](https://opensource.facebook.com/legal/privacy)

[ Terms ](https://opensource.fb.com/legal/terms/)

[ ](https://www.facebook.com/react) [ ](https://twitter.com/reactjs) [
](https://github.com/facebook/react)

##  On this page

  * Overview 
  * Responding to events 
  * State: a component’s memory 
  * Render and commit 
  * State as a snapshot 
  * Queueing a series of state updates 
  * Updating objects in state 
  * Updating arrays in state 
  * What’s next?