Problem in rendering real time data collected from firebase

Kundan Agrawal 0
Viewed 29

I stored some data on firebase collection, through the following code i am able to get that data on console but i am unable to render it on my website front-end. I am new to firebase can somebody please help me correct my code..

import React, { useState, useEffect} from 'react'
import "./Feed.css"
import MessageSender from './MessageSender'
import Post from './Post'
import StoryReel from "./StoryReel"
import db from "./firebase"
import { query, getDocs, onSnapshot, collection } from 'firebase/firestore';

function Feed() {
  const colRef = collection(db, 'posts')
  const posts =[]

onSnapshot(colRef, (snapshot) => {
      snapshot.docs.map((doc) =>{            
        posts.push({data:doc.data(), id: doc.id})
      })
      console.log(posts)
     } )    


  return (
    <div className="Feed">
        <StoryReel />
        <MessageSender />

      {posts.map((post) => {
          <Post
            key={post.id}
            profilePic={post.data.profilePic}
            message={post.data.message}
            timestamp={post.data.timestamp}
            username={post.data.username}
            image={post.data.image}
          />
        })}
       
    </div>
  )
}

export default Feed
google-cloud-firestore firebase reactjs
1 Answers

Since you're using React, you can use useState to re-render whenever posts changes.

const [posts, setPosts] = useState([])

onSnapshot(colRef, (snapshot) => {
      const tempPosts = []
      snapshot.docs.map((doc) =>{            
        tempPosts.push({data:doc.data(), id: doc.id})
      })
      console.log(tempPosts)
      setPosts(tempPosts)
     } )
Jim P0
Related