Data type changes when I try to persist data from shopping cart to Local Storage-CodePudding

import React, { useEffect, useState } from "react";
import "swiper/css/pagination";
import "swiper/css/grid";
import Preview from "./Preview";
import Figure from "./Figure";
import Search from "./Search";
import ReactPaginate from 'react-paginate'

const Figurelist = ({ myTheme, figures }) => {

  //Local Storage
  const [cart, setCart] = useState([]);
  
  useEffect(() => {
    localStorage.setItem("MY_CART", JSON.stringify(cart))
  }, [cart])

  const handleAddToCart = () => {
    console.log(JSON.stringify(previewData))
    setCart(previewData)
  }

  return (

        {isPreview === true && 
        <Preview previewData={previewData} 
        handlePreview={handlePreview}
        handleAddToCart={handleAddToCart}/>}
    </div>
  );
};

export default Figurelist;

********************** Preview component*********************************
import React, { useEffect, useState } from "react";
import { HiOutlineBackspace } from "react-icons/hi";
import {BsPlusSquareFill} from 'react-icons/bs'
const Preview = ({previewData, handlePreview, handleAddToCart}) => {

  const {id, img, title, description, price} = previewData

  
  return (
    <div className="previewContainer">
      <div className="previewCard" 
      key={id}>
      <button id="cancelBtn" onClick={handlePreview}>
        <HiOutlineBackspace style={{color:"var(--color-primary)"}}/>
      </button>


      <button id="addBtn" 
      onClick={handleAddToCart}>
        <BsPlusSquareFill />
      </button>

      <h3 id="priceTag">${price}</h3>

      <img src={img} alt="logo" id="img" />

      <div className="description">
        <h2>{title}</h2>
        <h5>{description}</h5>
      </div>

      <div className="priceCard" style={{display:"none"}} >
        <h3>${price}</h3>
        {/* <MdOutlineShoppingBag style={{ color: "var(--color-primary)" }} /> */}
      </div>
      </div>
      
    </div>
    
  );
};

export default Preview;

Data type changes when I try to persist data from the shopping cart to Local Storage

Initially, I set UseState for local storage to be an array, and on each onClick, I will add an object to that array but instead of adding the object to the array, the object completely overwrites the array into an object, so instead of getting data of an array of objects I have been only able to save an object at a time

I expect the local storage to be :

"MY_KEY", [{"id":1,"img","HTTP...",...}]

but I got :

"MY_KEY",{"id":1,"img","HTTP...",...}

CodePudding user response：

You might need to change your handleAddtoCart function.

try this,

const handleAddToCart = () => {
console.log(JSON.stringify(previewData))
setCart(oldCartValue => [...oldCartValue, previewData]) //this will add new value to the array instead of replacing it
}

CodePudding user response：

This should work.

const handleAddToCart = () => {
    console.log(JSON.stringify(previewData))
    const allProductInCart = cart.push(previewData)
    setCart(allProductInCart)
  }