Untitled

import { FunctionComponent, useEffect, useState } from "react";
import { Product } from "../interfaces/Product";
import { getProductsFromCart } from "../services/cartService";

interface CartProps {

}

const Cart: FunctionComponent<CartProps> = () => {
    const [products, setProducts] = useState<Product[]>()
    useEffect(() => {
        getProductsFromCart().then((res: any) => {
            let products = res.map((item: any) => item.data);
            setProducts(products)
            return products
        }).catch((err) => console.log(err)
        )
    }, []);
    
    return (<> <div>{products?.length && products.map((product) => {
        return <div className="card" key={product.id}>
            <div className="card-header">{product.category}</div>
            <img src={product.image} className="card-img-top" alt={product.name} title={product.name} />
            <div className="card-body">
                <h5 className="card-title">{product.name}</h5>
                <p className="card-text">
                    {product.description}
                </p>
                <p className="card-text">
                    price:   {product.price}$
                </p>
            </div>
        </div>
    })}</div></>);
}

export default Cart;