Query data from Firebase Firestore and Reactjs | Firebase and React Tutorial Series

[@shaheensiddiqui-5432]

Thanks piyush for making this video

[@piyushgargdev]

It's my pleasure

[@hacker57]

If don't mind plz correct name 🥺

[@mukulkumar9664]

🔥🔥🔥

[@nabinsaud4688]

I am expecting full stack ecommerce app using react and Firebase

[@NandiOnTheWheels]

Hi bro, when i try to pass a a props books.data() its showing error i spent 2hr but still showing errors :(

[@piyushgargdev]

What is the error?

[@NandiOnTheWheels]

@@piyushgargdev
HOME JSX
import React, { useEffect, useState } from "react";
import { useFirebase } from "../context/Firebase";
import CardList from "../components/Card"
const Home = () => {
const firebase = useFirebase();
const [books, setBooks] = useState("");
useEffect(() => {
firebase.listAllBooks().then((books) => setBooks(books.docs));
},[]);
return (


{

books.map((book)=>(

))
}

);
};
export default Home;

[@NandiOnTheWheels]

@@piyushgargdev
card.jsx
import React from 'react';
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
const CardList=(props)=> {
console.log("props",props)


return (





{props.name}

Book has a title {props.name} this book sold by {props.username}

Go somewhere



);
}
export default CardList;

[@NandiOnTheWheels]

@@piyushgargdev
ERRORS:-
react-dom.development.js:18687 The above error occurred in the component:
at Home (localhost:3000/static/js/bundle.js:687:82)
at RenderedRoute (localhost:3000/static/js/bundle.js:98822:5)
at Routes (localhost:3000/static/js/bundle.js:99259:5)
at div
at App (localhost:3000/static/js/bundle.js:49:74)
at FirebaseProvider (localhost:3000/static/js/bundle.js:471:74)
at Router (localhost:3000/static/js/bundle.js:99197:15)
at BrowserRouter (localhost:3000/static/js/bundle.js:97514:5)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit reactjs.org/link/error-boundaries to learn more about error boundaries.

[@piyushgargdev]

@@NandiOnTheWheels In Home.jsx update this -> ```const [books, setBooks] = useState([]);```
Changed "" to [] in hook initial value

[@Tareq0025]

Boss❤❤❤