Map object inside an mapped object

Question

I'm trying to map an array inside an already mapped array

My goal is to show the userName and products each user has.

First I map the data array and display the userName of each object. Then I try to display each product within the same object.

This is my attempt

{
    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>
                }  
              )}

The result is that the username gets displayed but the products don't

When I console.log('product',products.product)}

My response are my products

example:

product product1
product product2
product product3
product product4
product product5

So this confirms that the order object indeed gets mapped, but doesn't display the information inside the collapse => list => listItem. I'ts just empty

Can anyone tell me how to fix this?

Data feed and objects

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

You need to return the HTML like this:

{ 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>);
  }  
)}