title: When I connect my firebase with React.js it returns an empty screen and does not retrieve data from database, previously it used to work on older ver
body: <p>Here is my code, the same code used to work with the older version of firebase but now as I try to connect my React.js app to retrieve data from the database, it returns an empty screen and the console does not show any error messsage</p>
  <p>App.js:</p>
  <pre><code>import { useEffect, useState } from &quot;react&quot;;
  import &quot;./App.css&quot;;
  import Post from &quot;./Post&quot;;
  import {db} from &quot;./firebase&quot;;
  
  function App() {
    
    const [posts, setPosts]=useState([]);
  
    useEffect(()=&gt; {
      db.collection('posts').onSnapshot(snapshot =&gt; {
        
        setPosts(snapshot.docs.map(doc =&gt; doc.data() ))
      })
  
    }, []);
  
  
    
    return (
      &lt;div className=&quot;app&quot;&gt;
        &lt;div className=&quot;app__header&quot;&gt;
          &lt;img
            className=&quot;app__headerImage&quot;
            src=&quot;https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png&quot;
            alt=&quot;&quot;
          /&gt;
        &lt;/div&gt;
        
  
  
        {
          posts.map(post =&gt; (
            &lt;Post username={post.username} caption={post.caption} imageUrl={post.imageUrl} /&gt;
          ))
        }
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>