Breaking News: Grepper is joining You.com. Read the official announcement!

firebase get collection data react

Shirshak Kandel answered on April 14, 2022 Popularity 5/10 Helpfulness 3/10

answer firebase get collection data react

related get all data in collection firebase react

firebase get collection data react

Comment

import React from "react";
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { collection, getDocs, query, where, orderBy, limit, startAfter } from "firebase/firestore";
import { db } from "../firebase.config";
import { toast } from "react-toastify";
import Spinner from "../components/Spinner";
import ListingItem from "../components/ListingItem";

const Category = () => {
   const [listings, setListings] = useState(null);
   const [loading, setLoading] = useState(true);
   const params = useParams();

   useEffect(() => {
      const fetchListing = async () => {
         //TODO::calling firebase for listings.
         try {
            //GET REFERENCE to collection
            const listingRef = collection(db, "listings");
  
            //CREATE QUERY
            const q = query(
               listingRef,
               where("type", "==", params.categoryName),
               orderBy("timestamp", "desc"),
               limit(10)
            );

            //Execute query
            const querySnap = await getDocs(q);
            // console.log("querySnap",querySnap)
            //We have to loop over it.
            let listings = [];
            querySnap.forEach((doc) => {
               // console.log("doc", doc.data())
               return listings.push({
                  id: doc.id,
                  data: doc.data(),
               });
            });

            setListings(listings);
            setLoading(false);
         } catch (error) {
            console.log(error.message);
         }
      };

      fetchListing();
   }, [params.categoryName]);

   return (
      <div className="category">
         <header>
            <p className="pageHeader">
               {params.categoryName === "rent" ? "Places for rent" : "Places for sale"}
            </p>
         </header>
         {loading ? (
            <Spinner />
         ) : listings && listings.length > 0 ? (
            <>
               <main>
                  <ul className="categoryListings">
                     {listings.map((listing) => (
                        <ListingItem listing={listing.data} id={listing.id} />
                     ))}
                  </ul>
               </main>
            </>
         ) : (
            <p>No listing for {params.categoryName}</p>
         )}
      </div>
   );
};

export default Category;

Popularity 5/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: firebase get javascript

Link to this answer
Share Copy Link

Contributed on Mar 13 2023

Shirshak Kandel

0 Answers Avg Quality 2/10

Closely Related Answers

get all data in collection firebase react

Comment

 const [driverBookings, setdriverBookings] = useState([]);
  useEffect(() => {
    db.collection("driverBookings").onSnapshot((snapshot) => {
      let driverBooking = snapshot.docs.map((doc) => ({
        ...doc.data(),
        id: doc.id,
      }));

      setdriverBookings((prev) => [...prev, ...driverBooking]);
    });

Popularity 6/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: javascript firebase get

Link to this answer
Share Copy Link

Contributed on Apr 14 2022

Niraj Kafle

0 Answers Avg Quality 2/10

firebase get collection data react

Contents

More Related Answers

firebase get collection data react

Closely Related Answers

get all data in collection firebase react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.