File Explorer Component in React

File Explorer Component in React

Building a recursive file explorer in React with expand/collapse state.

Component

import React, { useState } from "react";

function TreeNode({ node, depth }) {
  const [expanded, setExpanded] = useState(false);
  const isFolder = node.type === "folder";

  return (
    <div>
      <div
        className={`tree-node ${node.type}`}
        style={{ paddingLeft: depth * 20 }}
        onClick={(e) => { e.stopPropagation(); if (isFolder) setExpanded(!expanded); }}
      >
        <span className="icon">{isFolder ? (expanded ? "📂" : "📁") : "📄"}</span>
        <span>{node.name}</span>
      </div>
      {isFolder && expanded && node.children && (
        <div className="children">
          {node.children.map((child, i) => (
            <TreeNode key={i} node={child} depth={depth + 1} />
          ))}
        </div>
      )}
    </div>
  );
}

function FileExplorer({ tree }) {
  return (
    <div className="file-explorer">
      <TreeNode node={tree} depth={0} />
    </div>
  );
}

Features

• Each TreeNode manages its own expanded state with useState.
• Recursive rendering: TreeNode renders its children as TreeNode components.
• Click toggles expand/collapse for folders.
• Icon changes based on expanded state.
• Indentation via paddingLeft: depth * 20.

CSS

.tree-node { padding: 4px 8px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.tree-node:hover { background: #e0e0e0; }
.tree-node.folder { font-weight: bold; }

The Takeaway

React file explorer: TreeNode component with useState for expand/collapse. Recursive rendering (TreeNode renders TreeNode for children). Click toggles expanded. Icon changes based on state. Indentation by depth. Each node manages its own state, making it simple and modular.