Properly Displaying Objects in JSX

When you need to display an object’s contents in JSX, you can’t render the object directly. Here are the correct approaches:

The Problem

This doesn’t work:

function UserProfile({ user }) {
  return (
    <div>
      <h2>User Data</h2>
      {user} {/* Will throw an error */}
    </div>
  );
}

Solutions

1. Using JSON.stringify() (Basic Solution)

function UserProfile({ user }) {
  return (
    <div>
      <h2>User Data</h2>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </div>
  );
}

2. Displaying Specific Properties (Recommended)

function UserProfile({ user }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <p>Joined: {new Date(user.joinDate).toLocaleDateString()}</p>
    </div>
  );
}

3. Creating a Custom Object Renderer

function ObjectViewer({ data }) {
  return (
    <ul>
      {Object.entries(data).map(([key, value]) => (
        <li key={key}>
          <strong>{key}:</strong> {typeof value === 'object' 
            ? <ObjectViewer data={value} /> 
            : String(value)}
        </li>
      ))}
    </ul>
  );
}

// Usage
<UserProfile user={user} />

Best Practices

1. Avoid dumping entire objects – Only display what users need to see
2. Format dates/numbers properly – Use .toLocaleString() variants
3. Handle nested objects – Either flatten or recursively display
4. Add error boundaries – For malformed data

Advanced Formatting Options

1. With Syntax Highlighting

import SyntaxHighlighter from 'react-syntax-highlighter';

function JsonViewer({ data }) {
  return (
    <SyntaxHighlighter language="json">
      {JSON.stringify(data, null, 2)}
    </SyntaxHighlighter>
  );
}

2. As Expandable Tree

import { TreeView } from '@material-ui/lab';
import { ExpandMore, ChevronRight } from '@material-ui/icons';

function ObjectTree({ data }) {
  const renderTree = (nodes) => (
    <TreeView
      defaultCollapseIcon={<ExpandMore />}
      defaultExpandIcon={<ChevronRight />}
    >
      {Object.entries(nodes).map(([key, value]) => (
        <TreeItem key={key} nodeId={key} label={key}>
          {typeof value === 'object' 
            ? renderTree(value) 
            : <TreeItem nodeId={key+'-value'} label={String(value)} />}
        </TreeItem>
      ))}
    </TreeView>
  );

  return renderTree(data);
}

Performance Considerations

1. Memoize stringification for large objects:

   const userString = useMemo(() => JSON.stringify(user, null, 2), [user]);

2. Virtualize long lists if displaying many objects
3. Lazy load complex object visualizations