Error: ID strings of the products were saved as an array

Programming
1

I’m trying to store the each of the product’s id in the cartItems, however, the strings of the ID are being saved separately meaning it becomes an array. How do I fix this?

image
image147×219 1.69 KB

codesandbox link: https://codesandbox.io/s/add-to-cart-jsd9fd?file=/src/App.js:0-2587

codes:

import React, { useState } from "react";
import "./styles.css";
import Cart from "./Cart";

export const products = [
  {
    colorMap: { Green: 5, Pink: 10, Black: 20 },
    size: "500",
    price: 200,
    prodName: "Tumbler",
    cat: "ML",
    id: "aRLMZkiSU7T0lcsPCSsV"
  },
  {
    price: 500,
    size: "M",
    prodName: "BTS Shirt",
    colorMap: { Red: 10, Blue: 12 },
    cat: "S-L",
    id: "hmYuXLLL8IYcliZoUvOA"
  },
  {
    size: "L",
    cat: "S-L",
    colorMap: { Black: 10, Blue: 10 },
    prodName: "Shirt",
    price: 300,
    id: "uTHIR6OQFRuqP9Drft0e"
  },
  {
    cat: "CM",
    price: 250,
    colorMap: { Black: 20, Red: 19, Green: 50 },
    prodName: "Notebook",
    size: "200",
    id: "y9ECyZBKp2OBekmWym4M"
  }
];

export default function App() {
  const [cartItems, setCartItems] = useState([]);

  const handleAdd = (id, name, size, cat, color) => {
    console.log("add", id, name, size, cat, color);
    const productExist = cartItems.find((item) => item.id === id);

    if (productExist) {
      setCartItems(
        cartItems.map((item) =>
          item.id === id
            ? { ...productExist, quantity: productExist.quantity + 1 }
            : item
        )
      );
    } else {
      setCartItems([
        ...cartItems,
        { ...id, name, size, cat, color, quantity: 1 }
      ]);
    }
  };

  // const handleAdd = (item) => {
  //   console.log("add", item);
  // };

  console.log(cartItems);

  return (
    <div className="App">
      {products.map((index) => (
        <ul key={index.id}>
          <li>
            <b>{index.prodName}</b>
          </li>
          <li>Category: {index.cat}</li>
          <li>Size: {index.size}</li>
          {Object.entries(index.colorMap).map((color) => (
            <>
              {color[1] !== 0 ? (
                <>
                  {color[0]}
                  <button
                    onClick={(e) =>
                      handleAdd(
                        index.id,
                        index.prodName,
                        index.size,
                        index.cat,
                        color[0]
                      )
                    }
                  >
                    Add to Cart
                  </button>
                  {/* <button onClick={(e) => handleAdd(index)}>Add to Cart</button> */}
                </>
              ) : (
                <>2</>
              )}
              <br />
            </>
          ))}
          Php {index.price}.00
        </ul>
      ))}
      {/* <Cart cartItems={cartItems} /> */}
    </div>
  );
}
2

Try to remove the spread operator on the else statement of the handleAdd function

} else {
  setCartItems([
    ...cartItems,
    { id, name, size, cat, color, quantity: 1 }
  ]);
}

This way the string id won’t be separated to an array

3

It does work that way. Thank you