To loop through and display an object in JSX, you can use the Object.keys() or Object.entries() method along with the map function. Here’s an example using Object.keys():
In this example, Object.keys(person) returns an array of the object’s property names. We then use the map function to iterate over these property names and render a list item for each property. Inside the map function, we use {person[key]} to access the corresponding value for each property.
If you want to include both the property name and value, you can use Object.entries() instead:
import React from 'react';
function DisplayObject() {
const person = {
name: 'John Doe',
age: 25,
occupation: 'Software Developer',
};
return (
<div>
<h1>Person Information:</h1>
<ul>
{Object.entries(person).map(([key, value]) => (
<li key={key}>
<strong>{key}:</strong> {value}
</li>
))}
</ul>
</div>
);
}
export default DisplayObject;
In this version, Object.entries(person) returns an array of [key, value] pairs for each property, which we destructure in the map function. Adjust the rendering logic based on your specific requirements.
