Deviopath › React

File Tree Explorer

Hard · Recursion

Render the nested TREE object as a file explorer using a recursive component.

- Every node is an <li>. A folder renders <button className="folder"> with the text "+ src" when collapsed or "- src" when expanded. When expanded, its children are rendered in a nested <ul> inside its <li>; when collapsed, its children are not rendered at all.

- A file renders <span className="file">App.jsx</span>.

- Clicking a folder button toggles it. At the start only "root" is expanded.

Keep the set of open folders in App state (for example an array of paths like "root/src") so that App can also render:

- an "Expand all" button that opens every folder,

- a "Collapse all" button that closes every folder except "root",

- <p className="count">Visible files: 1</p> with the number of files currently rendered.

Next: Nested Comments