How do I show nesting visually in a comments section?
Indent each level with left padding or margin. Cap the indentation at a reasonable depth so deeply nested threads do not push off the screen, like YouTube does after a few levels.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in How to Build a Nested Comments Section Like YouTube in React
Use a tree data structure where each comment has an id, text, author, and a replies array. Create a recursive Comment component that renders a comment and recursively renders its replies. Update immutably when adding replies, and use the id as the key.
Because the same shape repeats at every level. A comment has replies that are themselves comments. The natural way to render this is a Comment component that uses itself to render its replies, which is recursive rendering.
Immutably. Create a new tree with the added reply in the right place, not a mutation of the original. React detects the new reference and re-renders. Use the comment id as the key so additions update correctly.
Still have questions?
Browse all our FAQs or reach out to our support team