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
Source: stackoverflow.com
Related Query
- Render a table with a json array in Reactjs
- How to display json data with ReactJs as table
- Render images from files array on client with Reactjs
- Render image with json data | ReactJs
- How to render object data to table with Reactjs
- How to render array of objects in reactjs 1.0 with jsx?
- Render JSON data (from reddit API) with reactjs
- ReactJS Render Table for each value on Array
- Prevent duplicates from json array with reactjs and axios
- Displaying JSON multi-dimensional array data with ReactJS and map
- Manipulate JSON key values with one header row array and rest header values array for table
- ReactJS: How to render a JSON object with an array
- render react table with nested JSON data
- Render array data in table inside return of a function - Reactjs Javascript
- Can't get array elements previously declared to use it in render with ReactJS
- json not render with reactjs and redux
- How to create a table with values given by on json object in Reactjs
- How to render local json using single-spa with reactjs
- reactjs - render route with component dynamically via json
- Render html table in React with dynamic array of objects
- Reactjs need to combine the const in Render with axios call in componentDidMount to create DOM element table
- How to render bootstrap grid from array with map in reactjs
- ReactJS render string with non-breaking spaces
- React.js: loading JSON data with Fetch API and props from object array
- How to filter on ANTD table when the column is a JSON array instead of a string
- Datatables.net with ReactJS, render a ReactJS component in a column
- ReactJS with Material-UI: How to sort an array of Material-UI's <TableRow> alphabetically?
- Reactjs Render component dynamically based on a JSON config
- ReactJS Array fill with key in JSX element
- Displaying multi dimensional array with ReactJS
More Query from same tag
- How to useContext hook in Nextjs Layout
- Webpack / React/ Spring Boot: caching bundle.js with https
- Refresh token before Unauthorized Redirect in React and NodeJS
- How to send the data to server in react?
- How to make Node and React app to share classes
- All values are true, although the values have been changed
- React prevState uses this particular parenthesis syntax. What is it?
- React-Native change default location of iOS and Android folder
- Argument of type is not assignable to parameter of type Typescript Error
- React accordion get collapsible height
- Reactjs call function from another component
- React app shows props.location.state is undefined
- Handle click outside of return
- React Redux unexpected key passed to create store
- react props incorrect value
- Reactjs: Input mask after state.length === 5
- React: store state to template literals
- How to display data from a weather api in React?
- Issue removing item from list
- How to pass two functions to onClick event in react
- Mapping through array in React web app returning 'undefined'
- React Native -- Possible to console.log in return()?
- Whenever I Put the payment page on my app, it goes blank on ReactJS
- How to send consumed API response to another component?
- Rerendering component to already rendered container doesnt work as expected?
- How to get useEffect to not re-render infinitely
- ReactJS wraps each letter of text node in a separate span. Why?
- How to set expiration time for data stored in ReactJs localStorage
- How to push to url in gatsby js?
- How can I expose a property from my `Input` control to any other Component?