fetching data in react returns an empty array

i’m fetching data from my backend api and setting the data to my state but it’s returning an empty array and idk why this happening even though in other components it works just fine

this is my code :

import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import Loader from "../ui/svg/Loader/Loader";
import classes from "./CartDetails.module.scss";

const CartDetails = () => {
  const name = useParams().name;
  const id= useParams().id;
  const [pending, setPending] = useState(true);
  const [products, setProducts] = useState([]);

  useEffect(() => {
    async function fetchItems() {
      const data = await fetch(`http://localhost:8000/api/cart/${id}`);
      const res = await data.json();
      setProducts(res); 
      setPending(false);
    }

    fetchItems();
  }, []);

  return ( 
    <>
      {pending && <Loader/>}
      <div>
        <h1>{name}'s Cart</h1>
        {products.map(product => {
          <div key={product.name}>
            <h1>{product.name}</h1>
            <img src={product.image} alt={product.name} />
          </div>
        })}
      </div>
    </>
  );
}

export default CartDetails;

Answer

I was just missing a return in the .map function

Advertisement

Answer