I'm struggling to grasp the concept of rendering data from Firestore in my project. I've searched extensively but haven't been able to find a solution that fits my requirements.
Background Information
In my Firestore database, I have collections named posts and users. The objective is to display the content stored in these collections within a Posts component on the dashboard.
User Collection Details
The users collection includes an avatar property which contains URLs to user images. Each user's document ID corresponds to their unique username.
Posts Collection Specifics
Within the posts collection, there's an author field that aligns with the username/doc.id value for each post.
Main Objective
When iterating through the posts, I aim to create an array that stores the id and other relevant data related to each post. Additionally, it's crucial to establish a connection with the users collection so that, during each iteration, the script can fetch the corresponding avatar based on the post author.
Prior Attempts Made
One approach I experimented with involved utilizing async/await alongside the forEach loop. This method attempts to retrieve the correct user document by using the post.author value and extracting the associated avatar.
Posts Component Script:
import { useEffect, useState } from "react"
import { Link } from "react-router-dom"
import { collection, onSnapshot /*doc, getDoc*/ } from "firebase/firestore"
import { db } from "lib/firebase"
import AllPostsSkeleton from "components/Skeletons/AllPostsSkeleton"
import Tags from "components/Tags"
import defaultAvatar from "assets/images/avatar_placeholder.png"
// Further code implementation continues...