render_tree.js

const input = [
  { type: "dir", name: "src", contents:
      [
        { type: "dir", name: "doc", contents:
            [
              { type: "file", name: "TOC.md" },
              { type: "file", name: "css.md" },
              { type: "file", name: "extend.md" },
              { type: "file", name: "faq.md" },
              { type: "file", name: "html.md" },
              { type: "file", name: "js.md" },
              { type: "file", name: "misc.md" },
              { type: "file", name: "usage.md" }
            ]
        },
        { type: "dir", name: "img", contents:
            [
              { type: "file", name: ".gitignore" }
            ]
        },
        { type: "dir", name: "js", contents:
            [
              { type: "file", name: "main.js" },
              { type: "file", name: "plugins.js" }
            ]
        },
        { type: "file", name: "404.html" },
        { type: "file", name: "LICENSE.txt" },
        { type: "file", name: "browserconfig.xml" },
        { type: "file", name: "favicon.ico" },
        { type: "file", name: "humans.txt" },
        { type: "file", name: "icon.png" },
        { type: "file", name: "index.html" },
        { type: "file", name: "robots.txt" },
        { type: "file", name: "site.webmanifest" },
        { type: "file", name: "tile-wide.png" },
        { type: "file", name: "tile.png" }
      ]
  },
  { type: "dir", name: "test", contents:
      [
        { type: "file", name: "file_content.js" },
        { type: "file", name: "file_existence.js" }
      ]
  },
  { type: "file", name: "CHANGELOG.md" },
  { type: "file", name: "LICENSE.txt" },
  { type: "file", name: "README.md" },
  { type: "file", name: "gulpfile.babel.js" },
  { type: "file", name: "modernizr-config.json" },
  { type: "file", name: "package.json" }
]

import React from 'react';


export const Tree = (props) => {
	const data = props.data;

	return (
		<ul>
			{data && data.map((branch, index) => {
				return (
					<li key={index}>
						<div><i> {branch.type === 'dir' ? '>' : '📁' } </i><span>{branch.name}</span></div>
						{branch.contents && <Tree data={branch.contents} />}
					</li>
				)
			})}
		</ul>
	)
}