How do you build a file explorer in a machine coding interview?
Use a tree data structure with name, type (file/folder), and children. Write a recursive render function. Folders have a click handler to toggle children visibility. Use paddingLeft for indentation based on depth. Show different icons for files and folders.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in Building a File Explorer Component: A Complete Guide
Write a function that creates a DOM element for the current node, then recursively calls itself for each child. Append children to a container. For folders, add a click handler to toggle the container's display.
Add a click handler to folder elements. Toggle the children container's display between 'none' and 'block'. Update the folder icon (open/closed). Use e.stopPropagation() to prevent parent folders from toggling when a child is clicked.
A tree: each node is an object with name, type ('file' or 'folder'), and children (array of child nodes, only for folders). Files have no children. This nested structure allows recursive rendering.
Still have questions?
Browse all our FAQs or reach out to our support team