How to display keys and values of objects in a loop in React?

Question

How to display keys and values of objects in a loop in React?

Answer

You can’t map directly over an object — first, convert it into an array using Object.entries().

function UserDetails() {
  const user = { name: 'Ghazi', role: 'Engineer', country: 'India' };

  return (
    <ul>
      {Object.entries(user).map(([key, value]) => (
        <li key={key}>
          <strong>{key}:</strong> {value}
        </li>
      ))}
    </ul>
  );
}

✅ Other useful methods:

• Object.keys(obj) → returns an array of keys
• Object.values(obj) → returns an array of values

Real-World Example

Rendering user profiles, config summaries, or any object-based data structure.

Quick Practice

Create a component that displays all properties of a product object (name, price, stock) using Object.entries().

Summary

Use Object.entries() + map() to render object keys and values cleanly in React.