Tengo datos que parecen
[{subCategory: "subCategory", name: "name", data: [{ GradeName: "grade", Population: "population", }] }]y estoy ejecutando este código en mi componente
{currentCoinData.map((coin) => ( <tr key={coin.id}> <td>{coin.subCategory}</td> <td>{coin.fullName || coin.coinName}</td> <td></td> </tr> ))}¿Cómo puedo asignar la clave de datos de la matriz de objetos al componente td jsx?
simplemente use otra función de mapa dentro de su función de mapa:
{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> ))}Puedes usar .map dentro de un .map muy bien:
{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> ))}