How to Print All Properties of an Object to JSX in React.js

Let’s see how we can print all properties of an object (interface) to a table in React.js or Next.js.

Suppose we have an object (i.e. map, dictionary, etc), and we want to render each key-value pair as JSX (maybe for testing purposes), but the number of properties are variable.

Our object obj might contain ten key-value pairs or none.

    Object.keys(obj).length == 0
      ? "Object is empty"
      : Object.keys(obj).map((key) => {
          return (
            <tr key={obj[key]}>
              <td><pre>{JSON.stringify(obj[key], null, 2)}</pre></td>

If the object isn’t empty, we can iterate through all the keys with Object::keys.

If the value is an array, a nested map, or some other object, we’ll use JSON::stringify to print formatted text.