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.
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
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.
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!
Top comments (0)