Build 3: nested comments with replies at any depth
One tree in Thread, a recursive Comment, and a pure recursive helper that copies only the path to the changed comment. Each comment keeps its own "reply box open" state locally. For very large threads, a flat map { id: comment } with parentId makes updates O(1) (Topic 6.1).
A machine coding round asks you to build a small working UI (tabs, a star rating, nested comments, a file explorer, a stopwatch, a progress bar, pagination) in 45–90 minutes; you pass by clarifying first, planning the state shape, building a working skeleton, then adding behaviour, accessibility and polish while you talk through your choices.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a Pagination component that receives page, pageCount and onChange, renders Prev, page numbers and Next, disables Prev/Next at the ends, and marks the current page with aria-current="page".
Write the recursive Node component for the file explorer state plan above.
Explain it without notes
Walk through how you approach a 60-minute machine coding round, step by step.
How would you design the state for a file explorer with expand and collapse?
What makes a tabs component accessible?
Why build a stopwatch from timestamps instead of counting interval ticks?
Preview
Console
Nothing logged yet.Expected console output
Asha: Great article!
Ravi: Agreed.
You: Me too
Meera: Part 2 when?