How to map another object of arrays after a map?

Question

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?

is data array always of the same size (otherwise you'll get not quite aligned table rows with different number of <td> elements in them)? — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Aug 12, 2021 at 21:42
Also it looks like you didn't obfuscate your sample code carefully enough, since property names in your JSX code do not match your input object's properties. — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Aug 12, 2021 at 21:47

Liad · Accepted Answer · 2021-08-12 21:42:53Z

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> ))}

Kelvin Schoofs · Accepted Answer · 2021-08-12 21:37:42Z

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> ))}

Collectives™ on Stack Overflow

How to map another object of arrays after a map?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related