{}
    }

Note how with Immer, **mutation like` artwork.seen = nextSeen ` is now okay:
**

    
    
    updateMyTodos(draft => {  
    
    
      const artwork = draft.find(a => a.id === artworkId);  
    
    
      artwork.seen = nextSeen;  
    
    
    });

This is because you’re not mutating the _original_ state, but you’re mutating
a special ` draft ` object provided by Immer. Similarly, you can apply
mutating methods like ` push() ` and ` pop() ` to the content of the ` draft `
.

Behind the scenes, Immer always constructs the next state from scratch
according to the changes that you’ve done to the ` draft ` . This keeps your
event handlers very concise without ever mutating state.

##  Recap

  * You can put arrays into state, but you can’t change them. 
  * Instead of mutating an array, create a _new_ version of it, and update the state to it. 
  * You can use the ` [...arr, newItem] ` array spread syntax to create arrays with new items. 
  * You can use ` filter() ` and ` map() ` to create new arrays with filtered or transformed items. 
  * You can use Immer to keep your code concise. 

##  Try out some challenges

1  .  Update an item in the shopping cart  2  .  Remove an item from the
shopping cart  3  .  Fix the mutations using non-mutative methods  4  .  Fix
the mutations using Immer

####

Challenge  1  of  4  :

Update an item in the shopping cart

Fill in the ` handleIncreaseClick ` logic so that pressing ”+” increases the
corresponding number:

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 initialProducts = [{
      id: 0,
      name: 'Baklava',
      count: 1,
    }, {
      id: 1,
      name: 'Cheese',
      count: 5,
    }, {
      id: 2,
      name: 'Spaghetti',
      count: 2,
    }];
    
    export default function ShoppingCart() {
      const [
        products,
        setProducts
      ] = useState(initialProducts)
    
      function handleIncreaseClick(productId) {
    
      }
    
      return (
        <ul>
          {products.map(product => (
            <li key={product.id}>
              {product.name}
              {' '}
              (<b>{product.count}</b>)
              <button onClick={() => {
                handleIncreaseClick(product.id);
              }}>
                +
              </button>
            </li>
          ))}
        </ul>
      );
    }
    
    

Show more

Show solution  Next  Challenge

[ Previous  Updating Objects in State  ](/learn/updating-objects-in-state) [
Next  Managing State  ](/learn/managing-state)

* * *

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 
  * Updating arrays without mutation 
  * Adding to an array 
  * Removing from an array 
  * Transforming an array 
  * Replacing items in an array 
  * Inserting into an array 
  * Making other changes