Premium

React Nested Comments (Infinite Replies, Single Active Reply Input)

By FrontendAtlas Team · Updated Jan 30, 2026

Build a React nested comments panel with infinite replies. Users can add top-level comments and reply to any comment, creating an infinitely deep tree. Clicking Reply should open an input ONLY under that comment (single active reply box). Render nested replies with indentation. React focus:…

Render a nested comments UI as the main screen.
Allow adding top-level comments via a textarea + 'Add Comment' button.

What you’ll build / What this tests

This premium react coding focuses on React Nested Comments (Infinite Replies, Single Active Reply Input). You’ll apply react and state thinking with medium level constraints. The prompt emphasizes Build a React nested comments panel with infinite replies. Users can add top-level comments and reply….

Learning goals

Translate the prompt into a clear react API signature and return shape.
Apply react, state, recursion techniques to implement react nested comments (infinite replies, single active reply input).
Handle medium edge cases without sacrificing readability.
Reason about time/space complexity and trade-offs in react.

Key decisions to discuss

Define the exact input/output contract before coding.
Prioritize predictable edge-case handling over micro-optimizations.

Evaluation rubric

Correctness: covers required behaviors and edge cases.
Clarity: readable structure and predictable control flow.
Complexity: avoids unnecessary work for large inputs.
API discipline: no mutation of inputs; returns expected shape.
Testability: solution is easy to unit test.

Constraints / Requirements

Render a nested comments UI as the main screen.
Allow adding top-level comments via a textarea + 'Add Comment' button.
Each comment has a 'Reply' button.
Clicking 'Reply' opens a reply input ONLY under that comment (single active reply at a time).
Allow infinite depth replies (nested tree).
Render replies hierarchically with indentation.
Top-level 'Add Comment' adds a new comment to the list.
Clicking 'Reply' under a comment shows a reply input under that comment and hides any other open reply…
Posting a reply adds it as a child of the correct parent comment.
Cancel closes the reply input without changes.

Mini snippet (usage only)

// Example usage
const input = /* react nested comments (infinite replies, single active reply input) input */;
const result = solve(input);
console.log(result);

// Edge case check
const empty = input ?? null;
const fallback = solve(input);
console.log(fallback);

// Expected: describe output shape, not the implementation
// (no solution code in preview)

Common pitfalls

Mutating inputs instead of returning a new value.
Skipping edge cases like empty input, duplicates, or nulls.
Overlooking time complexity for large inputs.