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

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

codesandbox link: Add to Cart - CodeSandbox

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

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

1 Like

It does work that way. Thank you

1 Like