title: Populate from database and export array
body: <p>I'm new to react. I have data in my MongoDB collection. I can fetch this data. Now I'm using a template that I found online. It has a Grid component that I'm using to display all my data.</p>
  <p>Here's how I'm fetching the data</p>
  <pre><code>const [recruitList, setRecruitList] = useState([]);
  useEffect(() =&gt; {
    axios.get(&quot;http://localhost:8080/read&quot;).then((res) =&gt; {
      setRecruitList(res.data);
    });
  }, []);
  </code></pre>
  <p>Now, I want to populate this variable with as many rows or objects as there are in my collection.</p>
  <pre><code>export const recruitsData = [
    {
      Degree: 10248,
      RecruitName: 'Vinet',
      RecruitEmail: 32.38,
      PhoneNumber: '51481369',
      Skills: 'USA',
      Status: 'pending',
      StatusBg: '#FB9678',
      ProductImage:
        product6,
    },
  ];
  </code></pre>
  <p>For now, I'm just passing static data like this. I want to actually populate it with the data I'm getting from MongoDB.</p>
  <p>Here's what the localhost:8080/read gives</p>
  <pre><code>{
    &quot;_id&quot;: {
      &quot;$oid&quot;: &quot;62dc175ee1c7efe9fca97968&quot;
    },
    &quot;college_name&quot;: null,
    &quot;company_names&quot;: [
      &quot;Marathwada Mitra Mandal’s College of Engineering&quot;
    ],
    &quot;degree&quot;: [
      &quot;B.E. IN COMPUTER ENGINEERING&quot;
    ],
    &quot;designation&quot;: [
      &quot;Machine Learning&quot;,
      &quot;Schlumberger\nDATA ENGINEER&quot;,
      &quot;TECHNICAL CONTENT WRITER&quot;
    ],
    &quot;email&quot;: &quot;omkarpathak27@gmail.com&quot;,
    &quot;experience&quot;: [
      &quot;Schlumberger&quot;,
      &quot;DATA ENGINEER&quot;,
      &quot;July 2018 - Present&quot;,
      &quot;• Responsible for implementing and managing an end-to-end CI/CD Pipeline with custom validations for Informatica migrations which&quot;,
      &quot;Pune, Maharashtra, India&quot;,
      &quot;brought migration time to 1.5 hours from 9 hours without any manual intervention&quot;,
      &quot;• Enhancing, auditing and maintaining custom data ingestion framework that ingest around 1TB of data each day to over 70 business&quot;,
      &quot;units&quot;,
      &quot;• Working with L3 developer team to ensure the discussed Scrum PBI’s are delivered on time for data ingestions&quot;,
      &quot;• Planning and Executing QA and Production Release Cycle activities&quot;,
      &quot;Truso&quot;,
      &quot;FULL STACK DEVELOPER INTERN&quot;,
      &quot;• Created RESTful apis&quot;,
      &quot;• Tried my hands on Angular 5/6&quot;,
      &quot;• Was responsible for Django backend development&quot;,
      &quot;Pune, Maharashtra, India&quot;,
      &quot;June 2018 - July 2018&quot;,
      &quot;Propeluss&quot;,
      &quot;DATA ENGINEERING INTERN&quot;,
      &quot;• Wrote various automation scripts to scrape data from various websites.&quot;,
      &quot;• Applied Natural Language Processing to articles scraped from the internet to extract different entities in these articles using entity&quot;,
      &quot;Pune, Maharashtra, India&quot;,
      &quot;October 2017 - January 2018&quot;,
      &quot;extraction algorithms and applying Machine Learning to classify these articles.&quot;,
      &quot;• Also applied KNN with LSA for extracting relevant tags for various startups based on their works.&quot;,
      &quot;GeeksForGeeks&quot;,
      &quot;TECHNICAL CONTENT WRITER&quot;,
      &quot;• Published 4 articles for the topics such as Data Structures and Algorithms and Python&quot;,
      &quot;Pune, Maharashtra, India&quot;,
      &quot;July 2017 - September 2017&quot;,
      &quot;Softtestlab Technologies&quot;,
      &quot;WEB DEVELOPER INTERN&quot;,
      &quot;• Was responsible for creating an internal project for the company using PHP and Laravel for testing purposes&quot;,
      &quot;• Worked on a live project for creating closure reports using PHP and Excel&quot;
    ],
    &quot;mobile_number&quot;: &quot;8087996634&quot;,
    &quot;name&quot;: &quot;Omkar Pathak&quot;,
    &quot;no_of_pages&quot;: &quot;3&quot;,
    &quot;skills&quot;: [
      &quot;Parser&quot;,
      &quot;Html&quot;,
      &quot;Css&quot;,
      &quot;Javascript&quot;,
      &quot;Operating systems&quot;,
      &quot;Github&quot;,
      &quot;Website&quot;,
      &quot;Flask&quot;,
      &quot;Linux&quot;,
      &quot;System&quot;,
      &quot;Shell&quot;,
      &quot;Apis&quot;,
      &quot;Reports&quot;,
      &quot;Engineering&quot;,
      &quot;Opencv&quot;,
      &quot;C&quot;,
      &quot;Writing&quot;,
      &quot;Php&quot;,
      &quot;Cloud&quot;,
      &quot;Analytics&quot;,
      &quot;Scrum&quot;,
      &quot;Algorithms&quot;,
      &quot;Django&quot;,
      &quot;Windows&quot;,
      &quot;Automation&quot;,
      &quot;Unix&quot;,
      &quot;Photography&quot;,
      &quot;Content&quot;,
      &quot;Testing&quot;,
      &quot;C++&quot;,
      &quot;Machine learning&quot;,
      &quot;Mysql&quot;,
      &quot;Auditing&quot;,
      &quot;Python&quot;,
      &quot;Excel&quot;,
      &quot;Training&quot;,
      &quot;Migration&quot;,
      &quot;Programming&quot;,
      &quot;Security&quot;,
      &quot;Technical&quot;,
      &quot;Api&quot;
    ],
    &quot;total_experience&quot;: &quot;4.5&quot;,
    &quot;__v&quot;: 0
  }
  </code></pre>
  <p>I have many other &quot;rows&quot; such as this one. How do I populate my recruitData array with them. Thanks a lot in advance.</p>
  <p><strong>EDIT: Forgot to add the Grid structure, Here it is</strong></p>
  <pre><code>export const ordersGrid = [
    {
      headerText: 'Image',
      template: gridOrderImage,
      textAlign: 'Center',
      width: '120',
    },
    {
      field: 'RecruitName',
      headerText: 'Name',
      width: '150',
      editType: 'dropdownedit',
      textAlign: 'Center',
    },
    { field: 'RecruitEmail',
      headerText: 'Email',
      width: '150',
      textAlign: 'Center',
    },
    { field: 'PhoneNumber',
      headerText: 'Phone Number',
      width: '150',
      textAlign: 'Center',
    },
    {
      headerText: 'Status',
      template: gridOrderStatus,
      field: 'OrderItems',
      textAlign: 'Center',
      width: '120',
    },
    {
      field: 'Degree',
      headerText: 'Degree',
      width: '120',
      textAlign: 'Center',
    },
  
    {
      field: 'Skills',
      headerText: 'Skills',
      width: '150',
      textAlign: 'Center',
    },
  ];
  </code></pre>