React Add products to cart
How Can i handle adding product with multiple sizes iam storing the product in the local storage with 2 sizes (size1,size2) and the selected size is named size
so how can i split it to 2 components inside the cart
7 Replies
i would make my size an array
but what you can do is filter the values that start with "size" and then display them however you want to, probably as a single string separated by commas
const sizes = Object.entries(obj)
.filter(([key]) => key.startsWith("size"))
.map(([_, value]) => value);
const sizesString = sizes.join(", ");sry but i didn't understand you
see here is a product and has 2 sizes when i add one with 50ml and other with 75ml
the cart shows only the 75ml although it shos that the quantity is 2 (one 50 + one 75)
{
id: "1",
title: "Lip Fantastic",
img: "https://cdn.chec.io/merchants/17851/images/cdae2365eff5a961dd838b0505a1142b656efdf95f08c2785b59a|lips.jpg",
img1: "https://cdn.chec.io/merchants/17851/images/cdae2365eff5a961dd838b0505a1142b656efdf95f08c2785b59a|lips.jpg",
img2: "https://cdn.chec.io/merchants/17851/assets/JKQvBFAbqXZZPjeD|lips-2.jpg",
img3: "https://cdn.chec.io/merchants/17851/assets/DYFDwTnwZlJizFuc%7Clips-3.jpg",
description:
"A limited-edition, nourishing lip gel to top off your look and feel fantastic.",
pri: 24.0,
category: "facial",
size: "",
size1: "30ml",
size2: "50ml",
},
this is the object
The snippet that @dayoawobeku shared should work:
I think it's better if you share a reproduction of the error you have in a Codepen or Codesandbox. You can also share the snippet of your code that is in charge to display the corresponding items in your card, so we can see what could be wrong instead trying to guess.
i tried to share the code on sandbox but i couldn't can you log to my pc using anydesk ?
CodeSandbox
CodeSandbox is an online editor tailored for web applications.
@leweyse i uploaded the code on sandbox