How to Build Nested Comments in an Interview

How to Build Nested Comments in an Interview

Nested comments (Reddit-style) test recursion and tree rendering. Here is how to build it.

Requirements

• Display threaded comments with indentation.
• Reply to any comment (adds a nested child).
• Upvote/downvote.
• Collapse/expand a comment's children.
• Handle deeply nested structures.

Data Structure

const comments = [
  {
    id: 1,
    text: "Great post!",
    votes: 5,
    children: [
      { id: 2, text: "Thanks!", votes: 2, children: [] },
      { id: 3, text: "I agree", votes: 1, children: [] },
    ],
  },
];

Recursive Rendering

function renderComment(comment, depth) {
  const div = document.createElement("div");
  div.className = "comment";
  div.style.marginLeft = depth * 20 + "px";

  div.innerHTML = `
    <div class="comment-header">
      <button class="vote-up" data-id="${comment.id}">+</button>
      <span class="votes">${comment.votes}</span>
      <button class="vote-down" data-id="${comment.id}">-</button>
      <button class="reply" data-id="${comment.id}">Reply</button>
      <button class="collapse" data-id="${comment.id}">Collapse</button>
    </div>
    <p>${comment.text}</p>
    <div class="children" id="children-${comment.id}"></div>
  `;

  const childrenContainer = div.querySelector(`#children-${comment.id}`);
  comment.children.forEach((child) => {
    childrenContainer.appendChild(renderComment(child, depth + 1));
  });

  return div;
}

Event Handling (Event Delegation)

document.getElementById("commentsContainer").addEventListener("click", (e) => {
  const id = e.target.dataset.id;
  if (e.target.classList.contains("vote-up")) updateVote(id, 1);
  if (e.target.classList.contains("vote-down")) updateVote(id, -1);
  if (e.target.classList.contains("reply")) showReplyForm(id);
  if (e.target.classList.contains("collapse")) toggleCollapse(id);
});

CSS

.comment { border-left: 2px solid #ccc; padding: 8px; margin: 8px 0; }
.comment-header { display: flex; gap: 8px; align-items: center; }
.votes { font-weight: bold; min-width: 30px; }
button { cursor: pointer; padding: 2px 8px; }

Edge Cases

• Empty children (no replies).
• Very deep nesting (limit depth or add "load more").
• Reply form (inline text area).
• Collapse state persistence.
• Vote updates (re-render or update DOM directly).

The Takeaway

Build nested comments with a recursive render function, tree data structure, event delegation for vote/reply/collapse, and CSS indentation with border-left. Handle empty children, deep nesting, and reply forms. This tests recursion, tree rendering, and event delegation.