Soy bastante nuevo con reaccionar y desarrollo web en general.
He escrito este código pero no funciona como pretendía ( clásico )
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> ) Aquí data se ven como {'ada':{'profit_krw': '5000', 'profit_perc': '0.2'}, 'btc': {'profit_krw': '10000', 'profit_perc': '0.4'}}
Entonces, al final, me gustaría que se viera idealmente,
Name Profit in KRW Profit% ada 5000 0.2 btc 10000 0.4Foreach no devuelve nada, por lo que deberá usar un mapa allí o deberá ingresar a una matriz. Recomendaría el mapa:
<tbody> {Object.entries(data).map(([key, value]) => { return ( <tr> <td>{key}</td> <td>{value['profit_krw']}</td> <td>{value['profit_perc']}</td> </tr> ); })} </tbody>Para devolver algo, puede usar map() porque forEach() no devuelve nada
Aquí hay una caja de arena
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> ); }