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

get all data in collection firebase react

Niraj Kafle answered on April 14, 2022 Popularity 6/10 Helpfulness 5/10

answer get all data in collection firebase react

related firebase get collection data react

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: firebase get javascript

Link to this answer
Share Copy Link

Contributed on Apr 14 2022

Niraj Kafle

0 Answers Avg Quality 2/10

Closely Related Answers

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: get firebase javascript

Link to this answer
Share Copy Link

Contributed on Mar 13 2023

Shirshak Kandel

0 Answers Avg Quality 2/10

get all data in collection firebase react

Contents

More Related Answers

get all data in collection firebase react

Closely Related Answers

firebase get collection data react

Grepper

Documentation

Social

Legal

Contact

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