File explorer with expand and collapse

Timed build (25 minutes). Render the tree data as nested lists inside <ul id="tree">, at any depth (use a recursive component).

Folders are <button className="folder"> showing their name, with aria-expanded true or false. Files are <span className="file"> showing their name. All folders start closed, so at first only src and package.json are visible.

Clicking a folder shows or hides its children. Each folder remembers its own state: if you open src and components, close src and open it again, components is still open. (Hint: keep a Set of open folder ids in state.)

What Check tests

At first only src and package.json show, and src is collapsed
Opening src shows components and main.jsx
Opening components shows the two files inside it
Closing src hides everything inside it
Re-opening src remembers that components was open
Folders are real buttons (keyboard friendly)

Stuck? One hint at a time

The solution unlocks after your first Check. Try first: that is where the learning happens.

Runs in your browser. Your code is saved here.

Your page

Press Run to see the page.

Console

Nothing logged yet.

Command Palette

File explorer with expand and collapse