How do I iterate though an array of objects with keys and values in react and render them in the JSX( Both keys and Values)

Question

The below code gives me the grouped data as shown in the image. When I iterate through it and log the result to the console, I get the data but get blank html table when iterating the same way as I did to log the data in the console.

Here's how I'm grouping the data:

const finalGroup = sortedOrderItems && _.groupBy(sortedOrderItems, "deliveryDate");

let result = _.map(_.values(finalGroup), arr => _.groupBy(arr, 'deliveryDate'))

console.log("final grouping:",result)

 let tableData =     
     
        result && result.map(res=>{

                        Object.keys(res).map((key, index) => {   

                          <TableRow style={{backgroundColor:'#E6E6FA', textAlign:'center'}}>
                                  <TableCell colSpan={9} style={{backgroundColor:'#E6E6FA'}}>{key}</TableCell>
                          </TableRow>      
      
                      res &&  res[key].map((object) => {  

                                      return      <TableRow style={{backgroundColor:'#FAFAFA', textAlign:'center'}}>
                                            <TableCell style={{fontSize:'17px'}}> <img src={object.product.productImage} style={{border:'1px solid #DEDBDB',height:'50px',marginTop:'1px', marginLeft:'2px', width:'50px'}} alt={object.name} /></TableCell>
                                            <TableCell ><div style={{ wordWrap:'break-all'}}>{MOMENT(object.deliveryDate).tz(timeZone).format('YYYY-MM-DD, h:mm A')}</div></TableCell>
                          
                                            <TableCell ><div style={{width:'200px', wordWrap:'break-all'}}>{object.name}</div></TableCell>
        
                                            <TableCell><span style={{marginLeft:'-40px'}}>{object.unitName}</span></TableCell>
                                            <TableCell><span style={object.status == 'BACK_ORDER' ||  object.status == 'UNAVAILABLE' || object.status == 'OUT_OF_STOCK' ? {color:'red',marginLeft:'-35px'} : {color:'green', marginLeft:'-35px'} }>{object.status}</span></TableCell>
                                            <TableCell><span style={{textAlign:'center'}}>{regionID && regionID == 1050 ? <span>&#36;</span> : regionID && regionID == 1000 ? <span>&#x20b9;</span>: ''}{object.unitPrice}</span></TableCell>
                                            <TableCell><span style={{textAlign:'center'}}>{regionID && regionID == 1050 ? <span>&#36;</span> : regionID && regionID == 1000 ? <span>&#x20b9;</span>: ''}{object.totalPrice}</span></TableCell>
                                            <TableCell><span style={{}}>{object.quantity}</span></TableCell>                                                        
                                        
                                          <TableCell>
                                            <div style={{float:'right', marginLeft:'-65px'}}>
                                                <FormControl variant="outlined" style={{width:'202px', float:'right'}}>
                                                    <InputLabel id="status">Update Item Status</InputLabel>
                                                    <Select
                                                      style={{height:'44px',textAlign:'center', margin:'7px'}}
                                                      native
                                                      id= 'status'
                                                      value={OrderItemStatus.status}
                                                      onChange={(event, id)=>{handleStatusChange(event, object.id)}}
                                                      label="Update Order Status"
                                                                                            
                                                    >
                                                    <option aria-label="None" value="" />
                                                    {statuses.map((stat, index)=>{
                                                        return(<option id={index} key={index} value={stat}>{stat}</option>
                                                        )
                                                    })}
                                                    </Select>
                                                </FormControl>
                                              </div>
                                          </TableCell>
                                        
                                        </TableRow>
                                     
      
      
                          });
      
                  })
      
                      
        
         })
      
      
      

Any help would be greatly appreciated. Thank you!

Answer 1

It seems you have an array of objects where each object is a collection of key-value pairs where the values are the nested arrays you want to map. Don't forget to return the JSX you are mapping.

const tableData = result && result.map(res=> {
  return Object.entries(res).map(([key, value], index) => {
    return (
      <Fragment key={key}>
        <TableRow style={{backgroundColor:'#E6E6FA', textAlign:'center'}}>
          <TableCell colSpan={9} style={{backgroundColor:'#E6E6FA'}}>{key}</TableCell>
        </TableRow>
        {value.map((object) => {
          return (
            <TableRow style={{backgroundColor:'#FAFAFA', textAlign:'center'}}>
              ...
            </TableRow>
          );
        })}
      </Fragment>
    );
  })
})