Creating a simple file explorer with recursive components in React
Tags: react, javascript, webdev
Published: 2022-02-16 19:05:38

##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.
![VSCode file explorer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46cik50bxy17xy3mb64k.png)
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`
![files.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vblhzfcrpfczivavgeq6.png)

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 <Directory /> 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`
![Render out file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1y2wfsccvmth3vdogvm2.png)
 
Now for the folder part, we first render the name of the folder.

![Render out folder name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3fr6n3qtb8q4i3w9tku.png)

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.

![Render out items in folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gkhow0ra762l0rieex06.png)


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.


![Expand on clicking folder name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30b39yzks9fk7kejp3ek.png)

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`
![Use directory component in app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6sg72t5xedh8j5a6bfq.png)


Now, if we run our app, it should give us something like this. 
![Complete video](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwujw7b8ucf7wepblqpw.gif)
 

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

The complete source code can be found [here](https://github.com/sidv93/react-recursive-component)
 
Cheers!