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

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

Öffne die Seite Updating Arrays in State und reproduziere Challenge 2 mit dem bereitgestellten App.js-Beispiel. Vergleiche die Konsolenausgabe mit den gerenderten Zählwerten. Ermittle, ob die Lösung oder ihre Erklärung falsch ist; abgeschlossen ist die Aufgabe, wenn die dokumentierte Challenge einen konsistenten Zustand und konsistente angezeigte Ergebnisse erzeugt.