Tengo un objeto que mapeo dentro de un componente React para renderizar algunas cosas. Cada elemento de la matriz tiene otra matriz payroll_run_items dentro. Me gustaría obtener la suma de la amount de todos los elementos en ese subarreglo dentro de mi método de mapa. ¿Es esto posible dentro del mapa (algo así como crear un mapa dentro de un mapa)? Solo pude hacer que sucediera a través de un bucle y calculando el valor de antemano fuera del método del mapa.

objeto payrollRuns:

 (23) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] 0: amount: "0.00" company: {id: 1, name: 'Example Ltd.', country: 'Germany', city: 'Munich', zip: '80801', …} line_items: 0 month: {id: 55, period: '2024-03-01'} payroll_run_items: Array(4) 0: {id: 338, amount: '3780.00', offer: {…}, month: {…}, payroll_run: {…}} 1: {id: 361, amount: '4428.28', offer: {…}, month: {…}, payroll_run: {…}} 2: {id: 384, amount: '3780.00', offer: {…}, month: {…}, payroll_run: {…}} 3: {id: 407, amount: '3780.00', offer: {…}, month: {…}, payroll_run: {…}}

 const PayrollRuns = (props) => { const runItems = props.payrollRuns.map((run) => <div key={run.id} className="flex p-4 text-lg"> .. <div>{sum of all amounts of payroll_run_items array..}</div> </div> ); return ( <div className="runs-wrapper bg-white rounded-xl h-full w-48 shadow-sx-shadow p-4 flex flex-col"> <h1 className="border-b-2 pb-4">Payroll Runs</h1> <div className="grow overflow-auto">{runItems}</div> </div> ) } export default PayrollRuns