How to render a Object in React?

by

Data is an object so directly we can’t use map on that, so use Object.keys or Object.entries to get the array first, then use map on that to create ui items.

Using Object.keys:

_renderObject(){
    return Object.keys(ObjectTest).map(obj, i) => {
        return (
            <div>
                id is: {ObjectTest[obj].id} ;
                name is: {ObjectTest[obj].name}
            </div>
        )
    })
}

Using Object.entries:

const ObjectTest = {
    1: {
        id : 1,
        name:'ABC'
    },
    3: {
        id: 3,
        name:'DEF'
    }
}

class App extends React.Component{

	_renderObject(){
		return Object.entries(ObjectTest).map(([key, value], i) => {
			return (
				<div key={key}>
					id is: {value.id} ;
					name is: {value.name}
				</div>
			)
		})
	}

	render(){
		return(
			<div>
				{this._renderObject()}
			</div>
		)
	}
}

ReactDOM.render(<App/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Check this answer also: How to loop an object in ReactJS?

More Related Contents:

  1. Arrow function without curly braces
  2. Show or hide element in React
  3. How to set focus on an input field after rendering?
  4. babel-loader jsx SyntaxError: Unexpected token [duplicate]
  5. react router v6 navigate outside of components
  6. Correct use of arrow functions in React
  7. Reactjs setState() with a dynamic key name?
  8. React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
  9. How can I update state.item[1] in state using setState?
  10. ReactJS – .JS vs .JSX
  11. TypeError: Cannot read property ‘setState’ of undefined
  12. Is this the correct way to delete an item using redux?
  13. Objects are not valid as a React child. If you meant to render a collection of children, use an array instead
  14. Active link with React-Router?
  15. How can I render repeating React elements?
  16. Cleaner/shorter way to update nested state in Redux?
  17. How to make Puppeteer work with a ReactJS application on the client-side
  18. React js change child component’s state from parent component
  19. What’s the ‘@’ (at symbol) in the Redux @connect decorator?
  20. React-router: How to manually invoke Link?
  21. children prop in React component
  22. Simulate click event on react element
  23. Is it possible to use dotenv in a react project?
  24. having multiple instance of same reusable redux react components on the same page/route
  25. Electron IPC and nodeIntegration
  26. add raw HTML with inside Gatsby React page
  27. React Hook “useEffect” is called conditionally
  28. What are the differences when re-rendering after state was set with Hooks compared to the class-based approach?
  29. You’re importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with “use client”
  30. How can I redirect in React Router v6?

Leave a Comment