i have array of objects and iterated through the object using the array function (map) since we have the same key on all the objects not sure how to assign AA to 123, BB to 345 and CC to 555? AA is a hardcoded value for Also the order of the object may change like first it may be {atr1:CC,atr2:555} then the following
Need some help to overcome this problem.
/*
{atr1: "AA", atr2: 123},
{atr1: "BB", atr2: 345},
{atr1: "CC", atr2: 555}
*/
const eList = ecom[0].esat.ttl
return (
{eList .map((list) => (
<table class="greyGridTable">
<tbody>
<tr>
<td>AA</td>
<td>{iterated value 123}</td>
</tr>
<tr>
<td>BB</td>
<td>{iterated value 345}</td>
</tr>
<tr>
<td>CC</td>
<td>{iterated value 555}</td>
</tr>
</tbody>
</table>
))}
)
Right now, you return for each object in eList an entire table, i.e. three tables.
You only need to return the content of the <tr> for the "list" parameter via .map():
return (
<table class="greyGridTable">
<tbody>
{eList.map((list) => (
<tr>
<td>{list.atr1}</td>
<td>{list.atr2}</td>
</tr>
))}
</tbody>
</table>
)