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;
Advertisement
Answer
I was just missing a return in the .map function