create table with Object.entries

Question

i'm pretty new with react and web dev in general.

I've written down this code but it doesn't work like I intended (classic)


 return (
 
 <div>
 
        <table className="table table-stripped">
                <thead>
                        <tr>
                                <th>Name</th>
                                <th>Profit in KRW</th>
                                <th>Profit %</th>
                        </tr>
                </thead>
                <tbody>
                        
                        {Object.entries(data).forEach(([key, value]) => {
                        return (
                                 <tr>
                                     <td>{key}</td>
                                     <td>{value['profit_krw']}</td>
                                     <td>{value['profit_perc']}</td>
                                 </tr>
                                );
                         })}
                        
                </tbody>
        </table>
     
</div>

)

Here data looks like {'ada':{'profit_krw': '5000', 'profit_perc': '0.2'}, 'btc': {'profit_krw': '10000', 'profit_perc': '0.4'}}

So in the end I would like it to look like ideally,

Name       Profit in KRW        Profit%
   ada             5000               0.2
   btc            10000               0.4

forEach doesn't return anything so you would need to make an array then push onto that array in the loop or you can use a map instead of foreach — Colin Hale, Jul 11 '22 at 22:13

score 1 · Answer 1 · answered Jul 11 '22 at 22:15

Foreach doesn't return anything so you will need to use a map there or you will need to push onto an array. I would recommend the map:

   <tbody> 
    {Object.entries(data).map(([key, value]) => {
       return (
           <tr>
             <td>{key}</td>
             <td>{value['profit_krw']}</td>
             <td>{value['profit_perc']}</td>
           </tr>
          );
        })}
   </tbody>

dippas · Answer 2 · 2022-07-22T20:45:41.267

In order to return something you can use map() because forEach() doesn't return anything

export default function App() {
  const data = {
    ada: { profit_krw: "5000", profit_perc: "0.2" },
    btc: { profit_krw: "10000", profit_perc: "0.4" }
  };

  return (
    <div>
      <table className="table table-stripped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Profit in KRW</th>
            <th>Profit %</th>
          </tr>
        </thead>
        <tbody>
          {Object.entries(data).map(([key, value]) => {
            return (
              <tr>
                <td>{key}</td>
                <td>{value["profit_krw"]}</td>
                <td>{value["profit_perc"]}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

create table with Object.entries

2 Answers2