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?

Giovanni Esposito · Accepted Answer · 2022-02-16 10:17:24Z

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

answered Feb 16, 2022 at 10:17

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

My name is jeff Over a year ago

thanks, but how do I increment the only the product that needs to be incremented? Because right now both of my items is being incremented

Giovanni Esposito Over a year ago

@Mynameisjeff its just necessary to add a condition inside the map. Something like: result = result.map((x) => { if (condition) x.quantity = Math.max(0, x.quantity + 1); return x; });

Leehun · Accepted Answer · 2022-02-16 10:30:14Z

0

This is a way you can do to update the quantity of element:

...
{product.map((p, indx) => (
...
          <button
              className='btn btn-sm btn-success'
              onClick={() => {
                  const updateProducts = product
                  updateProducts[indx].quantity += 1
                  setProduct([...updateProducts])
              }}
            >
              +
         </button>
}}
))

answered Feb 16, 2022 at 10:30

Leehun

2062 silver badges5 bronze badges

Comments

Avi · Accepted Answer · 2022-02-16 10:26:04Z

0

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

answered Feb 16, 2022 at 10:26

Avi

1,4991 gold badge10 silver badges22 bronze badges

Comments

Harsh Mangalam · Accepted Answer · 2022-02-16 10:32:15Z

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;

Collectives™ on Stack Overflow

using setState with an array of objects

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related