Nested comments with replies
Timed build (30 minutes). Render the initial comments with their replies at any depth. Each comment is an <li className="comment"> containing a <p className="text"> with Author: text, a <button className="reply">Reply</button>, and, when it has replies, a nested <ul> of comments inside the same li.
Clicking Reply shows a <form> inside that comment with an <input> and a submit button. Submitting adds a reply from author You under that comment (trim the text, ignore empty replies) and closes the form.
A paragraph id="total" shows the number of comments at every depth, like 3 comments. Compute it from the tree; don't store it.
What Check tests
- All three comments render and the total says
3 comments - Ravi's reply is nested inside Asha's comment
- Replying to Ravi adds a nested reply from
You - The total updates to
4 comments - An empty reply is ignored
- Replying to a top-level comment works too
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Your page
Console
Nothing logged yet.