Tengo una pregunta sobre 2 matrices que tengo. He estado mapeando una matriz en una tabla. La primera matriz se ve así:
{data.portfolioHoldings.map((portfolioholding) => ( <tbody key={portfolioholding.id}> <tr key={portfolioholding.id}> <th scope="row">{portfolioholding.id}</th> <td>{portfolioholding.ticker_symbol}</td> <td>{portfolioholding.amount}</td> <td>{portfolioholding.fees}</td>))} Lo que resulta en una tabla como esta: 
Sin embargo, tengo otra matriz (de una fuente de API diferente):

Me gustaría combinar estas 2 fuentes de datos en 1 tabla. Como puede ver, el ID 1 de la segunda matriz es 149.03. Me gustaría tener otro <td> detrás de "tarifas" que diga el último precio con el valor de ID 1.
¿Cómo puedo mapear ambas matrices y trabajar juntas como una sola?
¡¡¡Gracias de antemano!!!
Si entiendo su pregunta correctamente, digamos que su segunda matriz se llama arr2 , puede hacer esto:
{data.portfolioHoldings.map((portfolioholding, index) => ( <tbody key={portfolioholding.id}> <tr key={portfolioholding.id}> <th scope="row">{portfolioholding.id}</th> <td>{portfolioholding.ticker_symbol}</td> <td>{portfolioholding.amount}</td> <td>{portfolioholding.fees}</td>)) <td>{arr2[index].quote.latestPrice}</td>)) } Asegúrese de que dos matrices tengan la misma longitud y la segunda matriz siempre debe tener quote.latestPrice dentro de cada elemento; de lo contrario, encontrará errores.
Solo una nota, parece que su tbody debería estar fuera de la función de map , solo se necesita un tbody para cada tabla
Datos combinados, algo como esto?
let data1 = [ { id: "1", name: "AAPL", amount: 154, fees: 0.5 }, { id: "1", name: "AMZN", amount: 3000, fees: 0.5 }, ]; let data2 = [ { id: "1", lastePrice: 149.55 }, { id: "2", lastePrice: 3475.79 } ]; const allData = (d1, d2) => d1.map(item1 => ({ ...d2.find((item2) => (item2.id === item1.id) && item2), ...item1 })); console.log( allData(data1, data2));