ReactJS Interview Questions — File Explorer

In a lot of machine coding interview, we need to create a File explorer like VS Code. We are going to solve that in this post.

Here, in a React codesandbox, we have created a data folder inside the src folder. Next, we have created a folderData.js file inside it. Our data is a json which is nested and contains folders and files.

In App.js, we will use the json data by using it through state.

Next, we will send the data as props to a new Folder component.

Inside the Folder.js file we will get the explorer data. Here, we are checking if it’s a folder then show it’s name with folder icon. Also, mapping through the it’s and showing it’s name.

If it’s a file we are showing file icon and it’s name.

Now, we will add style in the file. Here, we are also making the folder as clickable by giving it a state.

The main thing in the code is the recursive part. Here, we are calling the Folder component again from the items.

We will also add little style in our project and it’s completed. You can find the code for the whole project here.