Объект карты внутри сопоставленного объекта

Question

Я пытаюсь отобразить массив внутри уже сопоставленного массива

Моя цель - показать userName и products, которые есть у каждого пользователя.

Сначала я сопоставляю массив data и отображаю userName каждого объекта. Затем я пытаюсь отобразить каждый продукт в одном и том же объекте.

Это моя попытка

{
    this.state.orders.map((item, index) =>{
      return <div key={index}>
        <ListItem button onClick={()=>{this.handleClick('order1')}}>
          <ListItemIcon>
            <InboxIcon />
          </ListItemIcon>
          <ListItemText inset primary={item.userName}  secondary={item.order[0].product}/>
          {this.state.order1Open  ? <ExpandLess /> : <ExpandMore />}
           <AddIcon />
         </ListItem>
         <Collapse in={this.state.order1Open} timeout="auto" unmountOnExit>
           <List component="div" disablePadding>
             { item.order.map((products, index) =>{
               {console.log('product',products.product)}
                  <ListItem key={index} button className={classes.nested}>
                    <ListItemIcon>
                      <StarBorder />
                    </ListItemIcon>
                    <ListItemText inset primary={console.log(products.product)} />            
                  </ListItem>
                }  
              )}

В результате отображается имя пользователя, а продукты - нет

Когда я console.log('product',products.product)}

Мой ответ - мои продукты

пример: * * один тысяча двадцать-одна

product product1
product product2
product product3
product product4
product product5

Таким образом, это подтверждает, что объект order действительно отображается, но не отображает информацию внутри collapse => list => listItem. Я просто пуст

Может кто-нибудь сказать мне, как это исправить?

Подача данных и объекты

{
   "data":[
      {
         "id":1,
         "code":1,
         "userId":1,
         "userName":"Jerome Lebanner",
         "timeStamp":"01:00 07-04-2019",
         "order":[
            {
               "item":"product",
               "price":2.5,
               "qty":3
            },
            {
               "drink":"product",
               "price":5.5,
               "qty":3
            }
         ]
      },
      {
         "id":1,
         "code":2,
         "userId":1,
         "userName":"Claudia Schommels",
         "timeStamp":"01:00 07-04-2019",
         "order":[
            {
               "item":"product",
               "price":2.5,
               "qty":2
            },
            {
               "item":"product",
               "price":5.5,
               "qty":3
            }
         ]
      },
      {
         "id":1,
         "code":3,
         "userId":1,
         "userName":"LadiesChaser87",
         "timeStamp":"01:00 07-04-2019",
         "order":[
            {
               "item":"product",
               "price":4.5,
               "qty":1
            },
            {
               "item":"product",
               "price":5.5,
               "qty":3
            }
         ]
      }
   ]
}

Answer 1

Вам нужно вернуть HTML, как это:

{ item.order.map((products, index) =>{
    {console.log('product',products.product)}
    return (<ListItem key={index} button className={classes.nested}>
      <ListItemIcon>
        <StarBorder />
      </ListItemIcon>
      <ListItemText inset primary={console.log(products.product)} />            
    </ListItem>);
  }  
)}