Basic JSON Viewer

JsonViewer.js

import { useCallback, useState } from "react";

const MAXIMUM_DEPTH = 1;

function Node({
  value,
  depth = 1,
  isExpandedDefault = depth <= MAXIMUM_DEPTH
}) {
  const [isExpanded, setIsExpanded] = useState(isExpandedDefault);

  const toggle = useCallback(() => setIsExpanded((v) => !v), []);

  if (Array.isArray(value)) {
    return (
      <>
        <div>
          <button onClick={toggle}>{isExpanded ? "-" : "+"}</button>
        </div>
        <ul style={{ display: isExpanded === false ? "none" : undefined }}>
          {value.map((v, k) => (
            <li key={k}>
              <Node value={v} depth={depth} isExpandedDefault />
            </li>
          ))}
        </ul>
      </>
    );
  } else if (typeof value === "object" && value !== null) {
    return (
      <>
        <div>
          <button onClick={toggle}>{isExpanded ? "-" : "+"}</button>
        </div>
        <ul style={{ display: isExpanded === false ? "none" : undefined }}>
          {Object.entries(value).map(([k, v]) => (
            <li key={k}>
              <span>
                {k} ({depth})
              </span>
              : <Node value={v} depth={depth + 1} />
            </li>
          ))}
        </ul>
      </>
    );
  }

  return <span>{value}</span>;
}

const tree = {
  hello: "world",
  items: [
    {
      value: 1
    },
    {
      value: 2,
      deep: {
        name: "wow"
      }
    },
    {
      value: 3
    }
  ]
};

export default function App() {
  return <Node value={tree} />;
}

See: https://codesandbox.io/s/strange-proskuriakova-yj4rs?file=/src/App.js