ndboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    import { useState } from 'react';
    
    export default function Form() {
      const [person, setPerson] = useState({
        name: 'Niki de Saint Phalle',
        artwork: {
          title: 'Blue Nana',
          city: 'Hamburg',
          image: 'https://i.imgur.com/Sd1AgUOm.jpg',
        }
      });
    
      function handleNameChange(e) {
        setPerson({
          ...person,
          name: e.target.value
        });
      }
    
      function handleTitleChange(e) {
        setPerson({
          ...person,
          artwork: {
            ...person.artwork,
            title: e.target.value
          }
        });
      }
    
      function handleCityChange(e) {
        setPerson({
          ...person,
          artwork: {
            ...person.artwork,
            city: e.target.value
          }
        });
      }
    
      function handleImageChange(e) {
        setPerson({
          ...person,
          artwork: {
            ...person.artwork,
            image: e.target.value
          }
        });
      }
    
      return (
        <>
          <label>
            Name:
            <input
              value={person.name}
              onChange={handleNameChange}
            />
          </label>
          <label>
            Title:
            <input
              value={person.artwork.title}
              onChange={handleTitleChange}
            />
          </label>
          <label>
            City:
            <input
              value={person.artwork.city}
              onChange={handleCityChange}
            />
          </label>
          <label>
            Image:
            <input
              value={person.artwork.image}
              onChange={handleImageChange}
            />
          </label>
          <p>
            <i>{person.artwork.title}</i>
            {' by '}
            {person.name}
            <br />
            (located in {person.artwork.city})
          </p>
          <img
            src={person.artwork.image}
            alt={person.artwork.title}
          />
        </>
      );
    }
    
    

Show more

If copying objects 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 Objects in State ](/learn/updating-objects-in-state) ** to
learn how to update objects correctly.

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

* * *

##  Updating arrays in state

Arrays are another type of mutable JavaScript objects you can store in state
and should treat as read-only. Just like with objects, when you want to update
an array stored in state, you need to create a new one (or make a copy of an
existing one), and then set state to use the new array:

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';
    
    const initialList = [
      { id: 0, title: 'Big Bellies', seen: false },
      { id: 1, title: 'Lunar Landscape', seen: false },
      { id: 2, title: 'Terracotta Army', seen: true },
    ];
    
    export default function BucketList() {
      const [list, setList] = useState(
        initialList
      );
    
      function handleTogg