title: How to loop and render elements in React after we got the data from the backend?
body: <p>How is it possible to loop through the data from the backend and render components based on it?</p>
  <p>I've tried something like this:</p>
  <pre><code>import React, { useEffect } from 'react';
  import BuildingItem from './components/buildingItem';
  import { Config } from './config/config';
  
  export default function Buildings() {
  
    const buildings = [];
  
    useEffect(() =&gt; {
      fetch(Config.domain + 'kingdom/buildings', {
        headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
      })
        .then(res =&gt; res.json())
        .then(data =&gt; {
          
          for(let i = 0; i &lt; data.length; i++) {
            buildings.push(&lt;BuildingItem type={data[i].type} level={data[i].level} /&gt;);
          }
        })
    })
  
    return (
      &lt;div className='buildings'&gt;
        &lt;div className='buildings-container'&gt;
          {buildings}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>And also tried something like this when returning</p>
  <pre><code>&lt;div className='buildings-container'&gt;
          {buildings.map((item)=&gt; (
                item
          )}
  &lt;/div&gt;
  </code></pre>