I have data that looks like
[{subCategory: "subCategory",
name: "name",
data: [{
GradeName: "grade",
Population: "population",
}]
}]
and I am running this code in my component
{currentCoinData.map((coin) => (
<tr key={coin.id}>
<td>{coin.subCategory}</td>
<td>{coin.fullName || coin.coinName}</td>
<td></td>
</tr>
))}
How can I map the data key from the array of objects onto the td jsx component?
just use another map function inside you map function:
{currentCoinData.map((coin) => (
<tr key={coin.id}>
<td>{coin.subCategory}</td>
<td>{coin.fullName || coin.coinName}</td>
{coin.data.map(item =>
<td key={item.GradeName}>
{item.GradeName} {item.Population}
</td>
)}
</tr>
))}
You can use .map inside a .map just fine:
{currentCoinData.map((coin) => (
<tr key={coin.id}>
<td>{coin.subCategory}</td>
<td>{coin.fullName || coin.coinName}</td>
<td>{coin.data.map(item =>
<span key={item.GradeName}>{item.GradeName}</span>)}
</td>
</tr>
))}