title: .map() through array of object in next.js does not display in html but in console?
body: <p>I am not able to display the elements of this array in html. I am fetching data from the Bscscan api. I can fetch perfectly from the first api but the second does not show the data in the local browser. I will show you all the code I've got.</p>
  <p>I added also pictures of what the browser looks like and my terminal. It looks like i cannot map through arrays with objects, but I have tried everything change the object into react readable content, and nothing worked, so I will show you the code I started with. The Address 2 is the problem address.</p>
  <p>Code :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Head from 'next/head'
  import styles from '../styles/Home.module.css'
  import React from 'react'
  
  
  export default function Home(props) {
  
  
  
    const datatransone  =  props.addresstransaction;
    const databalone = props.addressbalance;
  
    //something wrong with stringify
    // const datatransone = JSON.stringify(datatransjson);
  
    console.log(databalone);
    console.log(datatransone);
  
    return  (
      &lt;ul&gt;      
        &lt;h1&gt;Address One&lt;/h1&gt;
        {databalone.map((balance) =&gt; {
          return (
        &lt;li&gt;{(balance.result * 1e-18).toString()}&lt;/li&gt;
        )})}
        &lt;div&gt;
        &lt;h1&gt;Address Two&lt;/h1&gt;
        &lt;div&gt;
        {datatransone.map(function(d){
           return (&lt;li key={d.hash}&gt;{d.result.hash}&lt;/li&gt;)
         })}
        &lt;/div&gt;
        &lt;/div&gt;
      &lt;/ul&gt;
    );
  }
  
  
  export async function getServerSideProps(context) {
  
      let wlunarush = ['0xb4e856c2a257457b862daed14967578bbdba3526', '0x52ab04656c807a3af96f98e4428291e813c2687a'];
      // let contractaddress = '0xde301D6a2569aEfcFe271B9d98f318BAee1D30a4';
    
  
      let balance = wlunarush.map(function(element){
  
        let bscbalance = 'https://api-testnet.bscscan.com/api?module=account&amp;action=tokenbalance&amp;contractaddress=0x0DBfd812Db3c979a80522A3e9296f9a4cc1f5045&amp;address=' + element + '&amp;tag=latest&amp;apikey=E2JAJX6MAGAZUHSYIBZIEMKMNW9NZKPR7I';
  
      return bscbalance;
    })
  
      let transaction = wlunarush.map(function(element){
  
        let bsctransaction = 'https://api-testnet.bscscan.com/api?module=account&amp;action=tokentx&amp;contractaddress=0x0DBfd812Db3c979a80522A3e9296f9a4cc1f5045&amp;address=' + element + '&amp;page=1&amp;startblock=0&amp;offset=1&amp;endblock=999999999&amp;sort=asc&amp;apikey=E2JAJX6MAGAZUHSYIBZIEMKMNW9NZKPR7I';
  
      return bsctransaction;
    })
  
  
  
      const addressbalance = await Promise.all(balance.map(u =&gt; fetch(u)))
      const addresstransaction = await Promise.all(transaction.map(e =&gt; fetch(e)))
  
  
    // console.log(bscbalancelist)
    // console.log(bscbalancelist);
    // const responsesec = await fetch(transaction);
    // const bscbalancelist = await bscbalone.json();
  
  
    return {
      props: {
        addressbalance:  await Promise.all(addressbalance.map(r =&gt; r.json())),
        addresstransaction:  await Promise.all(addresstransaction.map(p =&gt; p.json())),
      }
    };
  
  
  }</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/MNhzJ.png" rel="nofollow noreferrer">Console.log in Terminal :</a></p>
  <p><a href="https://i.stack.imgur.com/4KAUn.png" rel="nofollow noreferrer">Browser :</a></p>