Nested Comments System

Design a component that renders a tree of comments. Each comment can have replies, and those replies can have replies (n-levels deep). There will be an option to add a new comment and also delete a comment. This is a common frontend interview question that tests your understanding of recursive components and tree data structures.

High Level Idea

• It is essentially a tree structure.
• Each comment can have zero or more children.
• When you reply, a new node is added to the tree.
• Deleting a comment removes the node from the tree.

Implementation Strategy

Step 1: Architecture Design

• Store the comments in a tree-like structure.
  • Each comment has: id, text, and children.
• The entire comment list is an array of root-level comments.
• Each comment may contain nested levels of comments.

Basically, we will maintain the comments as a tree of objects, where each node represents a comment and contains an array of replies.

Sample Data Structure:

JSfile.js
1const comments = [
2  {
3    id: 1,
4    text: 'Hello, how are you?',
5    children: []
6  },
7  {
8    id: 2,
9    text: 'I am fine, thank you!',
10    children: [
11      {
12        id: 3,
13        text: 'I am good, thank you!',
14        children: []
15      }
16    ]
17  }
18];

Step 2: Component Structure

1. CommentList: Handles the top level of comments.
2. Comment: Handles the individual comment. It renders:
   • The comment text.
   • A reply button to add a new reply.
   • A delete button to delete the comment.
   • Children comments recursively.
   • Conditionally, a reply input field when the user clicks reply.

Components:

• CommentList
• Comment

Step 3: Data Flow

There are three main flows:

• Reply flow
• Delete flow
• Rendering flow

Reply Flow:

• User clicks on the reply button.
• A new comment input field is shown.
• When user submits the comment:
  • A new comment object is created.
  • It gets inserted in parent.children.
  • State gets updated.
• UI re-renders to show the new comment.

Delete Flow:

• User clicks on the delete button.
• The comment is removed from the tree.
• State gets updated.
• UI re-renders to remove the comment.

Rendering Flow:

• CommentList renders the top-level comments.
• Each Comment renders itself and recursively renders children.
• React handles updates automatically.