Creating a simple file explorer with recursive components in React

Introduction

Recursion is one of the most common programming constructs there is. Recursion in JavaScript land, is generally implemented via recursive functions, where a function calls itself. A very common example of a recursive function is the factorial function. It goes like this

function factorial(x) {
    if (x === 0) {
        return 1;
    }
    return x * factorial(x - 1);
}

As you can see, the function calls itself until the argument becomes 0. This idea can be extended to a variety of scenarios.

Idea

Where it gets interesting is when you add React into the mix. React components are basically functions. So, it must be possible for a component to render instances of itself in it.

Example

Let's build a simple file explorer to list files and folders. Each folder can in turn have multiple files and folders. When you click on a folder, it should expand to show its contents. It is exactly like the File Explorer sidebar in VSCode/Sublime etc.

Let's create a component that mimics this behaviour and uses recursion in the process.

Implementation

Before we get started on our component, we need a list of files and folders. We'll create a json file with a files and folders from a typical React project.

files.json

Here, each entry will have a name property, which denotes the name of the file/folder, a type property, which denotes if it is a file or a folder, and an items array, which in case of a folder will house all the contents in that folder. Each entry in the items array will again be an entry with the name, type and items properties.
With this, we are ready to create our recursive component

Recursive component

Our Directory component will accept a prop called files which will be the contents from our files.json file. First, let's get the easier part out of the way, displaying a file. If the type property is file, we simply render the file name

Directory.jsx

Now for the folder part, we first render the name of the folder.

To render the items in a folder, all we have to do is loop through the items array and render the <Directory /> component for each item.

Our <Directory /> component now uses recursion to traverse through our file list to render files and folders. One final thing left to do is, when you click on a folder, its contents should show up. We can do this by declaring a state variable in our component and toggling it on clicks.

Great! This should be enough to get our app up and running. We'll import this component and pass in contents from files.json as a prop.

App.jsx

Now, if we run our app, it should give us something like this.

Thats it! We've created a component which recursively calls itself.

The complete source code can be found here

Cheers!