Rendering Comment Section in React

Every website out there has a comment section. Starting from a simple blog to common social media sites. Therefore, finding a way to code this component in a few easy lines is important: For this exercise, I have used semantic-ui comments and recursive components for laying out the responsive nested structure.

Initial data for comments looks as follows:

{author : "Matt",  comment : "How artistic!", day : "Today", comments : [] },
{author : "Elliot Fu",  comment : "This has been very useful for my research. Thanks as well!", day : "Today", comments : [{author : "Jenny Hess",  comment : "Elliot you are always so right :)", day : "Today", comments : []}, ]},
{author : "Joe Henderson",  comment : "Dude, this is awesome. Thanks so much", day : "Yesterday", comments : []},
]

And then, we will use only one component for rendering this as follows :

Inside <DataComment/> we see a <DataComment/> !! (recursive which stops only with no futher comments)

Now lets wrap this in first top level comments:

A complete example using hooks

That’s it !! :

Similarly, additional functionalities can be added

Check this out :

1. https://codesandbox.io/s/wizardly-gould-e2dyk?file=/src/CommentExampleComment.js

2. https://github.com/praguna/react-comment-section

Thanks for reading through, Have a Great Day :)