using setState with an array of objects

Question

I am having a state with two products like this:

const [product, setProduct] = useState([
    {
      name: 'Hat',
      description: 'Nice cartoon hat',
      images: [
        'linktoimage',
      ],
      amount: 799,
      currency: 'eur',
      quantity: 0,
    },
    {
      name: 'Gift',
      description: 'Nice cartoon gift',
      images: [
        'linktoimage',
      ],
      amount: 599,
      currency: 'eur',
      quantity: 0,
    },
  ]);

I want to display them so I use a regular mapping :

<div className='product'>
        {product.map((p) => (
          <div>
            <h3>{p.name}</h3>
            <h4>
              Stripe Amount:{' '}
              {(p.amount / 100).toLocaleString('en-US', {
                style: 'currency',
                currency: 'EUR',
              })}
            </h4>
            <img src={p.images[0]} width='250px' alt='product' />
           
            <span style={{ margin: '20px', fontSize: '2em' }}>
              {p.quantity}
            </span>

            <button
              className='btn btn-sm btn-success'
              onClick={() => {
          
                setProduct([...p, (p.quantity = Math.max(0, p.quantity + 1))]);
              }}
            >
              +
            </button>
          </div>
        ))}

I am having hard time changing the quantity ( my last button) all I want is to change the products quantity but i cant do it somehow

tried like this:

  onClick={() => {setProduct([...p, (p.quantity = Math.max(0, p.quantity + 1))]);
}}

says that p is not iterable, i did another thing but when I inceremented my other product disappeared , i guess it is because I set the productState to ...p .

How can I incerement the given p product without losing my other product in my state?

Answer 1

I would suggest to increment quantity outside the setProduct and then set state:

onClick={() => {
  let result = [...product];
  result = result.map((x) => {
     x.quantity = Math.max(0, x.quantity + 1);
     return x;
  });
  setProduct(result);
}}

Answer 2

p is referring to an individual product while your state product is referring to the list of all products, so in order to update one item while preserving the rest of the list the same, you need to spread product first and then spread your specific item.

onClick={() => setProduct([...product, {...p, quantity: p.quantity + 1}])}

Answer 3

import { useState } from "react";

function App() {
  const [products, setProducts] = useState([
    {
      name: "Hat",
      description: "Nice cartoon hat",
      images: ["linktoimage"],
      amount: 799,
      currency: "eur",
      quantity: 0,
    },
    {
      name: "Gift",
      description: "Nice cartoon gift",
      images: ["linktoimage"],
      amount: 599,
      currency: "eur",
      quantity: 0,
    },
  ]);

  const handleIncrQuantity = (product) => () => {
    const updatedProducts = products.map((p) => {
      if (p.name === product.name) {
        return {
          ...product,
          quantity: Math.max(0, product.quantity + 1),
        };
      } else {
        return p;
      }
    });

    setProducts(updatedProducts);
  };
  return (
    <div className="App">
      {products.map((product) => (
        <div>
          {/* show your product details */}
          {JSON.stringify(product,null,4)}
          {product.quantity}
          <button
            className="btn btn-sm btn-success"
            onClick={handleIncrQuantity(product)}
          >
            +
          </button>
        </div>
      ))}
    </div>
  );
}

export default App;