title: Can't fetch firebase collection with React
body: <p>I'm using React hooks + firebase.</p>
  
  <p>In firebase, I created a collection called "projects"</p>
  
  <p><a href="https://i.stack.imgur.com/IW9Gy.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IW9Gy.jpg" alt="enter image description here"></a></p>
  
  <p>When I try to console log the data with:</p>
  
  <pre><code>const Dashboard = () =&gt; {
    const { firebase } = useContext(GlobalContext);
  
    return (
      &lt;div className="container"&gt;
        {console.log(firebase.db.collection("projects"))}
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>I'm getting the following object:</p>
  
  <p><a href="https://i.stack.imgur.com/fZWhS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fZWhS.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Shouldn't be able to see my data?</strong></p>
  
  <p>Below are my firebase and context set up</p>
  
  <p>firebase.js</p>
  
  <pre><code>import app from "firebase/app";
  import "firebase/auth";
  import "firebase/firebase-firestore";
  
  const config = {//mydata}
  
  class Firebase {
    constructor() {
      app.initializeApp(config);
      this.auth = app.auth();
      this.db = app.firestore();
    }
  }
  
  export default new Firebase();
  </code></pre>
  
  <p>context.js</p>
  
  <pre><code>import React, { useReducer } from "react";
  import { projectReducer } from "./reducers";
  import firebase from "../components/firebase/firebase";
  
  export const GlobalState = props =&gt; {
    const [projects, setProjects] = useReducer(projectReducer, []);
  
    return (
      &lt;GlobalContext.Provider
        value={{
          projects,
          firebase
        }}
      &gt;
        {props.children}
      &lt;/GlobalContext.Provider&gt;
    );
  };
  </code></pre>