Question 74482 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

        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 categoria = useParams()

  const getProducts = async () => {
    const data = await getDocs(productsCollection);
    if(categoria.category){
    const dataCategory = data.docs.map((doc) => ({ ...doc.data(), id: doc.id }))
    setProducts(dataCategory.filter(i=> i.category === categoria.category))
      console.log(products)
    }else {

      setProducts(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
  }
}


  useEffect(()=>{

    getProducts()

  },[categoria.category])

 

    return (
  
      <>
  
        <div className="d-flex flex-wrap justify-content-center">
  
        {products.map((product) => (
  
          <Card className="card" key={product.id} style={{ width: "18rem" }}>
  
            <Card.Img variant="top" className="cardImg" src={product.imgProduct} />
  
            <Card.Body>
  
              <Card.Title>{product.name}</Card.Title>
  
          
  
              <div className="d-flex justify-content-around">
  
              <Link  variant="primary" className="btn btn-dark boton btnDetalles" to={`/Item/${product.id}`}>Ver Detalles</Link>
  
              </div>
  
            </Card.Body>
  
          </Card>
  
        ))}
  
        </div>
  
      </>
  
    );
  
  }

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

Tags:

2

Answers


  1. 0

    The issue is Firestore getDocs() results does not have the .map method. I ran into the same issue and end up using the .forEach method:

    Instead of this:

    const data = await getDocs (productsCollection)
setProducts(data.docs.map((doc)=>({...doc.data(),id:doc.id})))

    Use this:

    const querySnapshot = await getDocs (productsCollection)

let data = [];

querySnapshot.forEach((doc: any) => {
  data.push({ ...doc.data(), id: doc.id });
});

setProducts(data);

    OLD ANSWER

    (This is still relevant for people who set an undefined key on a React .map iterator that outputting DOM.)

    Based on your screenshot, where it seems there is no id property set in any of your objects. If there is no id, then this section may have rendering issues since your key is undefined.

    Login or Signup to reply.
  2. 0

    I think u forgot that return in map:

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

    also u can do:

    {products.map((product) => (
    <div key={product.id}>
       <p>{product.name}</p>
     </div>
 ))}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search