title: Trying to render a MUI Grid dynamically in React
body: <p>I first make a request to a MongoDB server to get data from a database, all asynchronously and return a promise in App.js.</p>
  <p>Then I pass that as a prop in my Card.js component and use .then() to get the data and push it into a new array. (I'm not sure if this is the best way to do this)</p>
  <p>Right now I'm trying to display the names in the data dynamically using an MUI Grid, I am having problems as it shows that the data is in my array but I get no Cards on the UI. What am I doing wrong?</p>
  <p>Card.js</p>
  <pre><code>import * as React from 'react';
  import Grid from '@mui/material/Grid';
  import RoomCard from './RoomCard'
  import { useState } from 'react';
  
  export default function Card({rooms}){
      const [loading, setLoading] = useState(false);
      let roomData = [];
      rooms.then(roomNames =&gt; { 
        roomNames.map(room =&gt; roomData.push(room)); 
      })
      console.log(roomData);
      
      return(&lt;Grid container spacing={2}&gt;
              {roomData.map(room =&gt; 
                  &lt;Grid item key={room} xs ={4}&gt;
                    &lt;RoomCard name = {room.name} /&gt;
                  &lt;/Grid&gt;
              )}
            &lt;/Grid&gt;
      );
  
  }
  </code></pre>
  <p>App.js</p>
  <pre><code>import './App.css';
  import Navbar from './components/NavBar';
  import AddRoom from './components/AddRoom'
  import RoomCard from './components/RoomCard'
  import Grid from '@mui/material/Grid';
  import Cards from './components/Cards'
  
  function App() {
    let rooms = getRecords();
    return (
      &lt;div className=&quot;App&quot;&gt;
          &lt;Navbar/&gt;
          &lt;AddRoom/&gt;
          &lt;Cards rooms = {rooms} /&gt;
      &lt;/div&gt;
    );
  }
  
  
  async function getRecords() {
    const response = await fetch(`http://localhost:5000/room/`);
  
    if (!response.ok) {
      const message = `An error occured: ${response.statusText}`;
      window.alert(message);
      return;
    }
  
    const rooms = await response.json();
    
    return rooms;
  }
  
  export default App;
  </code></pre>