score:1

Accepted answer

here i have modified your json array by removing the machine name. but still there is a way to differentiate between machiness.

    let arr = [
     [
        {    
            "image": "mysql:latest",
            "names": "mysql",
            "status": "restarting (1) 18 seconds ago"
        },
        {
            "image": "kafka:latest",
            "names": "kafka",
            "status": "up 15 hours"
        },
        {
            "image": "postgresql:latest",
            "names": "postgresql",
            "status": "restarting (1) 18 seconds ago"
        }
    ],
    [
        {
            "image": "mysql:latest",
            "names": "mysql",
            "status": "restarting (1) 18 seconds ago"
        },
        {
            "image": "elasticsearch:latest",
            "names": "elasticsearch",
            "status": "up 15 hours"
        }
    ]    
]

then here is how to iterate through it to display every item

   <ul>
      { 
        arr.map((items, i) => {      
          return <div>{ 
            items.map((item, i) => {
              return <li key={i}>{item.names+",  "+ item.image}</li>
            })  }
             <h4>next machine</h4></div>
         })
      }
   </ul>

you can see on codesandbox how the output behaves


Related Query

More Query from same tag