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

Abra a página Updating Arrays in State e reproduza a Challenge 2 com o exemplo de App.js fornecido, comparando a saída do console com as contagens renderizadas. Determine se a solução ou sua explicação está incorreta; a tarefa estará concluída quando o challenge documentado produzir um estado e resultados exibidos consistentes.

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>
  );
}