<div id="main"></div>
details > details,
details > div {
  padding-left: 16px;
}
const App = () => <div>
  <DirView dir={{ hello: { world: { details: "!!" } } }} />
</div>

const isDir = (entity) =>
  !(entity instanceof Array) && typeof entity === 'object';

const DirView = ({ dir }) => (
  <>
    {Object.entries(dir).map(([name, entity]) =>
      isDir(entity) ? (
        <details key={name}>
          <summary>{name}</summary>
          <DirView dir={entity} />
        </details>
      ) : (
        <div key={name}>{name}</div>
      )
    )}
  </>
);

ReactDOM.render(<App />, document.getElementById('main'))
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js