CODEWITHSUNDEEP
javascriptreactjsfirebasegoogle-cloud-firestore
Ian
Ian

Reputation: 47

Using ReactJs with Cloud Firestore V9, I have an issue with rendering to the dom

I'm learning how to use Cloud Firestore from Firebase combined with React JS. For starters here what my Cloud Firestore data looks like... enter image description here I was reading the documentation for V9 but I still had issues. Link to -> Firebase docs : Listen to multiple documents in a collection

I actually even copied and pasted what I read and it worked! BUT!! Only for a brief moment. I wasn't sure if I changed the code by accident. Since for some reason it wasn't rendering to the dom, I console.log a few items and it showed something was happening. I was able to see data values in the console! But still nothing was being rendered. Here's my code... and screenshots of my console.

  const firebaseApp = initializeApp({
apiKey: "Hidden",
authDomain: "Hidden",
projectId: "Hidden",


 });
  const db = getFirestore();

  const [dataFB, set_dataFB] = useState([]);

  async function getSomethingTEST() {
    let items = [];
    const q = await query(collection(db, "WNA-Pasteur-Items"));
    await onSnapshot(q, (querySnapshot) => {
      querySnapshot.forEach((doc) => {
        items.push(doc); // <-- Here I also tried doc.data().nameENG
      });             // And was able to see the specific values in the console. 
      console.log("What is inside: ", items.join(", "));
    });
    set_dataFB(items);
  }

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

The first console.log with only items from doc , I got this... enter image description here The second console.log with doc.data().nameENG , I got this... enter image description here

Then with my JSX code looked liked this.

    <p>please work</p>
    {dataFB.map((e) => (
      <div key={e.id}>
        <h3>{e.nameENG}</h3>
      </div>
    ))}

Which rendered this... enter image description here

Upvotes: 0

Views: 101

Answers (1)

Dharmaraj
Dharmaraj

Reputation: 50840

Push the document data instead of document snapshot:

items.push(doc.data())

Then stringing before rendering:

console.log("What is inside: ", JSON.stringify(items.join(", ")))

Upvotes: 1

Related Questions