Tengo esta estructura de código:

 [ [ { 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 }, ] ]

matriz de tres matrices -tal vez más o menos de tres es un número dinámico- cada una de estas matrices consiste en matrices de objetos

Escribí este código:

 <thead> <tr> <th scope='col'>Items</th> <th scope='col'>Total Items Price</th> </tr> </thead> <tbody> {cardItems.map((items) => items.map((item) => ( <tr> <td> <b>Item:</b> {item.title}, <b>Item Price:</b> {item.price},{' '} <b>Item Count:</b> {item.count}, <b>Item Total Price:</b> {item.totalPrice} </td> </tr> )) )} </tbody> </table>

y obtuve esta salida:

pero este no es el resultado que necesitaba, necesito que cada matriz interna esté en uno, no cada elemento solo, quiero separarlo por objetos, así:

cada objeto juntos en una fila.