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 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>
In order to return something you can use map() because forEach() doesn't return anything
Here is a sandbox
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>
);
}