title: Cannot show data in the page
body: <p>I am using firestore to store my data. I following code to retrieve data from firestore</p>
  <pre class="lang-js prettyprint-override"><code>const [jobs, setJobs] = useState([])
  
      useEffect(() =&gt; {
          const fetchData = async () =&gt; {
              const data = await database.collection('jobs').get()
              setJobs(data.docs.map(doc =&gt; doc.data()))
          }
          fetchData()
      }, [])
  </code></pre>
  <p>and in my return statement, I have</p>
  <pre class="lang-js prettyprint-override"><code>&lt;Row className=&quot;row-grid&quot;&gt;
     {jobs.map(job =&gt; {
       &lt;h1&gt;Test&lt;/h1&gt;
     }
  &lt;/Row&gt;
  </code></pre>
  <p>However, <code>Test</code> is not being shown on the page. I even changed from <code>&lt;h1&gt;Test&lt;/h1&gt;</code> to <code>console.log(job)</code> and I am able to see all the content and job has data. But I am not able to figure why the header tag or any HTML tags show up.</p>