Deviopath › React

Nested Comments

Hard · Recursion

Build a comment thread where every comment can be replied to, at any depth. Render INITIAL_COMMENTS inside <div className="thread"> with a recursive component.

Each comment is a <div className="comment" data-id="..."> whose direct children are, in order:

- <p className="body">Ana: Great article!</p> ("author: text")

- a "Reply" button

- only while replying: <div className="reply-form"> with <input className="reply-input">, "Post" and "Cancel"

- <div className="replies"> with the child comments (same structure)

"Post" adds a reply from "You" as the last reply of that comment and closes the form. Empty replies (or only spaces) are ignored and the form stays open. "Cancel" closes the form. New comments get the ids 4, 5, 6, ... in posting order.

Above the thread, <h3>Comments (3)</h3> counts the comments at all depths.

Next: Game of Life