how to separate each object output using map method - React.js

Question

I have this code structure:

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

array of three arrays -maybe more or less than three it's dynamic number- each one of these arrays consists of arrays of objects

I wrote this code:

<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>

and I got this output:

but this is not the output I needed, I need each inner array to be in one not each item alone, I want to separate it by objects, like this:

each object together in one row.

When u say each object together in a row , means u want it to be comma separated the actual output you need is not clear — Aman Sadhwani
– Aman Sadhwani, Commented Jun 11, 2022 at 0:10

Aman Sadhwani · Accepted Answer · 2022-06-11 05:30:10Z

1

Try This

 <tbody>
        {cardItems.map((items) => (
          <tr>
            <td>
              {items.map((item) => (
                <>
                  <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>

answered Jun 11, 2022 at 5:30

Aman Sadhwani

3,6183 gold badges20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to separate each object output using map method - React.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related