List of Products from an API - arrays

Question

For my app, I am using an API that contains sales order history.
The returned array looks like this, I take an example of an order with 2 products :
Object {
"amount": 2671.25,
"balance": 0,
"client_id": 1,
"created_at": "2020-05-06T17:42:26Z",
"discount": 0,
"discount_type": 0,
"id": 19,
"items": Array [
Object {
"cost": 2400,
"currency": "EUR",
"description": "blablabla",
"name": "Apple MacBook Air 15'' LED 500 Go SSD 32 Go",
"product_id": 5,
"quantity": 1,
"tax_rate_id": 1,
},
Object {
"cost": 54.25,
"currency": "EUR",
"description": "Blablabla",
"product_id": 2,
"quantity": 5,
"tax_rate_id": 4,
},
],
"po_number": "",
"public_notes": "TEST 6 : Acomptes",
"quote_date": "2020-05-06",
"quote_number": "D1460019",
"quote_status": 40,
"terms": "",
"updated_at": "2020-05-06T18:08:06Z",
},
Currently on my screen, I return the date of the order in 'title' with a drop-down menu where I have the total price of the order. It works, I use this code:
<ScrollView>
{
this.state.displayArray.map((item, i) => (
<List.Section title={item.created_at} key={i.toString()}>
<List.Accordion
title={item.id}
left={props => <List.Icon {...props} icon="cart" />}>
<List.Item title={`${item.amount} €`}/>
</List.Accordion>
</List.Section>
))
}
</ScrollView>
But now, I would like to make this screen a little more complex. I would like to add to the drop-down menu the number of items and the name + price of the items (wholesale, have the detail of the order)
My problem is that I don't know how to extract the products from the array. If I do
<List.Item title = {`$ {item.items.name}} />
it won't work since there are two objects with two different names in the array ... (i tried and it returns 'undefined')
I'm not sure how to do it.
I know my English is not perfect, I don't know if my explanations are clear. Basically there, I only have the price below my order and I will like with the details of the products with their respective prices.
---------------------------- EDIT TO ADD SOLUTION -------------------------------
Thank you #HichamELBSI
<ScrollView>
{
this.state.displayArray.map((item, i) => (
<List.Section title={item.created_at} key={i.toString()}>
<List.Accordion
title={item.id}
left={props => <List.Icon {...props} icon="cart" />}>
<List.Item title={`${item.amount} €`}/>
{
item.items.map((product, i) => (
<List.Item title={product.name} key={i.toString()}/>
))
}
</List.Accordion>
</List.Section>
))
}
</ScrollView>

Answer 1

I think you can map the products like what you do for the display.
<ScrollView>
{
this.state.displayArray.map((item, i) => (
<List.Section title={item.created_at} key={i.toString()}>
<List.Accordion
title={item.id}
left={props => <List.Icon {...props} icon="cart" />}>
<List.Item title={`${item.amount} €`}/>
</List.Accordion>
{item.items.map(product => (
<List.Item title={product.name} />
)}}
</List.Section>
))
}
</ScrollView>
Let me know if that is what you need