I try to render elements from an array from firestore but nothing happens?

        import Card from 'react-bootstrap/Card';
import Button from 'react-bootstrap/Button';
import {collection, getDocs, doc} from "firebase/firestore"
import {db} from "../firebaseConfig/firebase"
import React, { useState, useEffect } from "react";

const Cards = () =>{

    const [products, setProducts] = useState([])
    const productsCollection = collection (db,"zproducts")
    const getProducts = async ()=>
    const data = await getDocs (productsCollection)




    useEffect(() => {
      }, []);

        {products.map((product)=> {
            <div key={product.id}>
            <Card style={{ width: '18rem' }}>
      <Card.Img variant="top" src="holder.js/100px180" />
        <Card.Title>Card Title</Card.Title>
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        <Button variant="primary">Go somewhere</Button>
export default Cards

Ok so when I try to create a p tag rendering product.name it does not render, it should render next to the boostrap card, but for some reason nothing happens.

When I do a console log the array from firestore does appear, but if I do for example console.log(products.name) I get undefined as a result on console

>Solution :

I think u forgot that return in map:

{products.map((product) => {
   return <div key={product.id}>

also u can do:

{products.map((product) => (
    <div key={product.id}>

Leave a Reply Cancel reply