Creating recursive components for recursive data

A recursive data structure is a data structure that is defined in terms of itself, meaning that it can be composed of smaller instances of the same type of structure. Recursive data is everywhere – think of a comment section where replies can have their own sub-replies, or a filesystem with nested folders. Creating a component to display them in a frontend application can be challenging.

Imagine we have a variable called folder, which is an array containing either files or additional folders. In this example, the folder variable could look like this:

const folder = [
  { type: 'file', name: 'a.js' },
  { type: 'file', name: 'b.js' },
  { type: 'folder', name: 'c', children: [
    { type: 'file', name: 'd.js' },
  ]},
];

Currently, our folder variable is two levels deep. To represent...