tengo esta estructura
[ [ { title: 'McRoyale', price: 70, count:5, totalPrice: 350 }, { title: 'Big Mac', price: 55, count:1, totalPrice: 55 }, ], [ { title: 'Double Big Tasty', price: 99, count:2, totalPrice: 198 }, ], [ { title: 'Grand Chicken Premier', price: 72, count:3, totalPrice: 216 }, { title: 'Spicy Chicken Fillet', price: 60, count:2, totalPrice: 120 }, ] ]y necesito calcular el precio total de cada matriz para que el resultado esperado sea:
405
198
336
y necesito poner estos valores en este td vacío
<table className='table'> <thead> <tr> <th scope='col'>Items</th> <th scope='col'>Total Items Price</th> </tr> </thead> <tbody> {cardItems.map((items) => ( <tr> <td> {items.map((item) => ( <> <b className='mc-red'>{item.title}</b> Item Price:{' '} {item.price} LE, Item Count: {item.count}, Item Total Price:{' '} {item.totalPrice} LE <br /> </> ))} </td> <td>{}</td> </tr> ))} </tbody> </table>para ser visto aquí en las filas vacías por orden
405 luego 198 luego 336 en cada tr en orden
Esto le dará el resultado esperado
const calcPrice = (item) => { return item.reduce((accumulator, object) => { return accumulator + object.totalPrice; }, 0); }; {cardItems.map((items) => ( <tr> <td> {items.map((item) => ( <> <b className="mc-red">{item.title}</b> Item Price:{" "} {item.price} LE, Item Count: {item.count}, Item Total Price:{" "} {item.totalPrice} LE <br /> </> ))} </td> <td>{calcPrice(items)}</td> </tr> ))}