JSFiddle - React, Tailwind, and code Playground

HTML

<div id="output"></div>

JavaScript

const directory = [{
    type: 'file',
    name: 'file1.txt'
  },
  {
    type: 'file',
    name: 'file2.txt'
  },
  {
    type: 'directory',
    name: 'HTML Files',
    files: [{
        type: 'file',
        name: 'file1.html'
      },
      {
        type: 'file',
        name: 'file2.html'
      }
    ]
  },
  {
    type: 'file',
    name: 'file3.txt'
  },
  {
    type: 'directory',
    name: 'JavaScript Files',
    files: [{
        type: 'file',
        name: 'file1.js'
      },
      {
        type: 'file',
        name: 'file2.js'
      },
      {
        type: 'file',
        name: 'file3.js'
      }
    ]
  }
];

const renderDir = (directory) => {
  return directory.map(dir => {
    if (dir.type === 'file') {
      return `<li>${dir.name}</li>`
    }
    return `<li>${dir.name}<ul>${renderDir(dir.files)}</ul></li>`
  }).join('')

}

const output = renderDir(directory);

const a = document.getElementById('output').innerHTML = output;


console.log('output', output, a);