Order products (Array)

Question

Good morning, I have the following lines of code to return an order listing with the respective products. Products is an object within requests in the comic book.

{transactions.map((order) => {
  return <ul className="collection" key={order._id}>
    Pedido nº<strong> {order.order_number}</strong> -
Data: {order.created_at.substring(8, 10)}-{order.created_at.substring(5, 7)}-
{order.created_at.substring(0, 4)} -
Produtos: {order.line_items.length} -
Status: aguardando produtos para envio

<div>
      {JSON.stringify(order.line_items, ["id", "title"])}
    </div>
  </ul>
})}

And the result is the screen below (I made a record just to illustrate):

Order nº 1003 - Date: 08-09-2020 - Products: 2 - Status: waiting Shipping products [{"id":5827489562779,"title":"Bath Duckling Munchkin Thermometer - White Hot Ducky"},{"id":5827489595547,"title":"Fourth product: Product out of stockpile"}]

However, I am only trying to show you the Product ID and name (one per line). I would like to know where I am missing. :(

Thanks for your help.

Answer 1

You can make a map inside this other

{transactions.map((order) => {
  return (<ul className="collection" key={order._id}>
    Pedido nº<strong> {order.order_number}</strong> -
    Data: {order.created_at.substring(8, 10)}-{order.created_at.substring(5, 7)}-
    {order.created_at.substring(0, 4)} -
    Produtos: {order.line_items.length} -
    Status: aguardando produtos para envio
    {order.line_items.map(item => {
        return <div>{item.id} - {item.title}</div>
    })}
  </ul>)
})}