React app showing blank screen after i inserted code to use firebase

Rakshit rajput 0
Viewed 27

My code works on localhost for a split second (I see my application) and then the page become blank.

   function Feed() {
      const[posts,setPosts]=useState([]);
    
      useEffect(() => {
        const q = query(collection(db, "posts"))
        const unsub = onSnapshot(q, (querySnapshot) => {
          console.log("Data", querySnapshot.docs.map(d => doc.data()));
        });


    here i am returning <div>

<div className='feed'>
        {/*Header */}
        <div className="feed_header">
        <h2>Home</h2>
        </div>

.....

here is my code.

{posts.map((post)=>(
        <Post displayName={post.displayName}
        username={post.username}
        verified={post.verified}
        text={post.verified}
        avatar={post.avatar}
        image={post.image}
        />

this is code i am using to pass data to post

google-cloud-firestore firebase reactjs javascript
1 Answers

function Feed() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const q = query(collection(db, "posts"))
    const unsub = onSnapshot(q, (querySnapshot) => {
      console.log("Data", querySnapshot.docs.map(d => doc.data()));
    });
    return unsub;
  }, []);

  // add the data you want to render in the return statement.
  return ( < div > < /div>);
}

You forgot to render anything in your component.

userCmuh0
Related