I am trying to create a mapping for the object below using { ...product.images[0] }, { ...product.type[0] }, and
{ ...product.productPackages[0] }This is the object I need to map:
export const customImage = [
{
status: false,
image: null,
price: 10,
},
];
I have imported it like this:
import { customImage } from "@/utils/customImage";
The current declaration seems incorrect. I received an error for this mapping [specifically for
selectedCustomImage: customImage,Type '{ status: boolean; image: null; price: number; }[]' is missing the following properties from type 'SelectedCustomImageType': status, image, pricets(2739)
(property) selectedCustomImage: SelectedCustomImageType
Any assistance on mapping this array correctly would be greatly appreciated.
Here's a snippet of my code :
"use client";
import { useCart } from "@/hooks/useCart";
import { customImage } from "@/utils/customImage";
import { formatPrice } from "@/utils/formatprice";
import { Rating } from "@mui/material";
import { useRouter } from "next/navigation";
import { useCallback, useEffect, useState } from "react";
import { MdCheckCircle } from "react-icons/md";
import toast from "react-hot-toast";
import Button from "@/app/components/Button";
import CustomImageInput from "@/app/components/inputs/CustomImageInput";
import PackageButton from "@/app/components/inputs/PackageButton";
import ProductImage from "@/app/components/products/ProductImage";
import SetQuantity from "@/app/components/products/SetQuantity";
import TypeImage from "@/app/components/products/TypeImage";
import SetColor from "@/app/components/products/setColor";
import SetType from "@/app/components/products/setType";
interface ProductDetailsProps {
product: any;
}
export type CartProductType = {
id: string;
name: string;
description: string;
category: string;
brand: string;
selectedImg: SelectedImgType;
selectedProduct: SelectedProductType;
quantity: number;
selectedPackage: SelectedPackageType;
price: number;
productPrice: number;
file: any;
selectedCustomImage: SelectedCustomImageType;
};
// customImagePrice: number;
export type SelectedImgType = {
color: string;
colorCode: string;
image: string;
};
export type SelectedProductType = {
type: string;
typeCode: string;
typePrice: number;
image: string;
};
export type SelectedPackageType = {
packaging: string;
price: number;
image: string;
};
export type SelectedCustomImageType = {
status: boolean;
image: string;
price: number;
};
export type CustomImage = {
status: boolean;
image: File | null;
price: number;
};
const Horizontal = () => {
return <hr className="w-[30% my-2]" />;
};
const ProductDetails: React.FC<ProductDetailsProps> = ({ product }) => {
const router = useRouter();
const { handleAddProductToCart, cartProducts } = useCart();
const [isProductInCart, setIsProductInCart] = useState(false);
const [cartProduct, setCartProduct] = useState<CartProductType>({
id: product.id,
name: product.name,
description: product.description,
category: product.category,
brand: product.brand,
selectedImg: { ...product.images[0] },
selectedProduct: { ...product.type[0] },
quantity: 1,
price: product.price,
productPrice: product.price,
selectedPackage: { ...product.productPackages[0] },
file: null,
selectedCustomImage: customImage,
});
useEffect(() => {
setIsProductInCart(false);
if (cartProducts) {
const existingIndex = cartProducts.findIndex(
(item) => item.id === product.id,
);
if (existingIndex > -1) {
setIsProductInCart(true);
}
}
}, [cartProducts]);
...
export default ProductDetails;