React Component to render Directory Structure

import "./styles.css";

const Directory = (props) => {
  const { content } = props;

  return content.children.map((item) => {
    const isDirectory = "children" in item;
    return (
      <div class="container" key={item.name}>
        <span> {isDirectory ? "Dir - " : "File - "}</span>
        <span>{item.name}</span>
        {isDirectory && <Directory content={item} />}
      </div>
    );
  });
};

export default function App() {
  return (
    <Directory
      content={{
        name: "Root",
        children: [
          {
            name: "John"
          },
          {
            name: "Private",
            children: [
              {
                name: "Private1"
              },
              {
                name: "Private2"
              }
            ]
          }
        ]
      }}
    />
  );
}


/* Output

File - John
Dir - Private
  File - Private1
  File - Private2

*/