How to loop and display an object in React jsx

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.

Vinod Kumar