React: Why on .map an array doesn't show list of items?

Question

I'm trying to show list of items that i get from an API in the backend. However, when I try to map the array, then it doesn't show any item. What am I doing wrong? Anyone could help please?

I tried to console log and I can see list of items being fetched correctly. The h2 tag also displays. but not the .map results.

This is the code:

interface Props {
  products: Product[] | [];
}

const ProductsList = ({ products }: Props) => {
  useEffect(() => {
    getProducts();
    console.log('fetched data', getProducts());
  }, []);

  return (
    <RootContainer>
      <h2>test</h2>
      {products &&
        products.map((product) => {
          return <ProductItem key={product.id} product={product} />;
        })}
    </RootContainer>
  );
};

export default ProductsList;

This is the getProducts() function that fetch data from another port.

const getProducts = async () => {
  let API_URL = 'http://localhost:5000/api/Products';

  const response: any = await fetch(API_URL);
  const data = await response.json();

  return data;
};
export default getProducts;

Answer 1

I think the issue may be that you are retrieving the products but not actually doing anything with them - therefore the "products" check you perform before iterating will return false.

Try using a state variable:

const ProductsList = () => {

  const [products, setProducts] = useState<product[]>();

  useEffect(() => {
    getProducts().then((result) => setProducts(result);
  }, []);

  return (
    <RootContainer>
      <h2>test</h2>
      {products &&
        products.map((product) => {
          return <ProductItem key={product.id} product={product} />;
        })}
    </RootContainer>
  );
};

The principal here is that when the getProducts() method returns it will update the state variable with a list of products. This change in state will cause the component to refresh and the products.map will be reached.