title: How to fetch data from three firebase collections into one table in react.js
body: <p>I have three different collections in cloud firestore and I am storing my feedback app data in these collections. In the beginning I am storing students data into the students collection, after that I am storing the feedback of the student inside feedback collection and finally I am storing some extra information inside the details collections. Now I am fetching all the data in my admin panel table. I have fetched the details collection data successfully but not getting the logic of how get other informations in the table, and how will I relate the data with each other?</p>
  <pre><code>import React, { useEffect, useState } from 'react';
  import MaterialTable from 'material-table';
  import AdminNavbar from '../../layout/AdminNavbar';
  import firebase from '../../../config/fbConfig';
  
  const Dashboard = (props) =&gt; {
    const [tableData, settableData] = useState();
    useEffect(() =&gt; {
      getdata();
    });
  
    console.log(props);
    async function getdata() {
       const ref = firebase
        .firestore()
        .collection(&quot;details&quot;);
      const snapshot = await ref.get();
      settableData(snapshot.docs.map(doc=&gt;doc.data()))     
    }
  
    const tableCol = [
      {
        title: &quot;Course expectations&quot;,
        field: &quot;course_delivering_on_your_expectations&quot;
      },
      {
        title: &quot;Oppurtunities&quot;,
        field: &quot;enough_opportunities_to_apply&quot;
      },
      {
        title: &quot;Explanation Clear&quot;,
        field: &quot;explanation_of_concepts_clear&quot;
      },
      {
        title: &quot;Knowledge&quot;,
        field: &quot;instructor_knowledgeable_about_the_topics&quot;
      },
      {
        title: &quot;Engaging&quot;,
        field: &quot;instructors_delivery_engaging&quot;
      },
      {
        title: &quot;Learning&quot;,
        field: &quot;learning_valuable_information&quot;
      }
    ];
    
      return (
          &lt;&gt;
              &lt;AdminNavbar /&gt;
              &lt;div className=&quot;table-div&quot;&gt;
                  &lt;MaterialTable
            title={&quot;Student's Feedback&quot;}
              data={tableData}
            columns={tableCol}
            
            options={{
              headerStyle: {
                backgroundColor: &quot;#01579b&quot;,
                color: &quot;#FFF&quot;
              },
              exportButton: true,
              selection: false,
              search: true
            }}
            
          /&gt;
              &lt;/div&gt;
  
          &lt;/&gt;
      );
  }
  
  export default Dashboard;
  </code></pre>