[Bug]: The solution to the state-related challenges on the webpage appear to be incorrect.

[HorvathGabor]

trafficstars

Summary

In the documentation on the 'Learn' page, under the section 'Updating Arrays in State,' the solution for Challenge 2 appears to have a bug.

When using console.log to debug the solution, the counts in the product array do not match what is displayed on the screen.

Page

https://react.dev/learn/updating-arrays-in-state

Details

"According to the solution's description, when the '+' button is pressed, the count value in the initialProducts array should increment. However, logging the values to the console shows that the values on the screen differ from those in the array."

Solution with 2 extra lines for logging (App.js):

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) {
    setProducts(products.map(product => {
      if (product.id === productId) {
        return {
          ...product,
          count: product.count + 1
        };
      } else {
        return product;
      }
    }))
    // Next 2 lines are not parts of the solution.
    // They were added to test the result.
    console.log(initialProducts)
    console.log(products)

  }

  function handleDecreaseClick(productId) {
    let nextProducts = products.map(product => {
      if (product.id === productId) {
        return {
          ...product,
          count: product.count - 1
        };
      } else {
        return product;
      }
    });
    nextProducts = nextProducts.filter(p =>
      p.count > 0
    );
    setProducts(nextProducts)
  }

  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>
          {product.name}
          {' '}
          (<b>{product.count}</b>)
          <button onClick={() => {
            handleIncreaseClick(product.id);
          }}>
            +
          </button>
          <button onClick={() => {
            handleDecreaseClick(product.id);
          }}>
            –
          </button>
        </li>
      ))}
    </ul>
  );
}