Rendering Comment Section in React
1 min readJan 7, 2022
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 :
Now lets wrap this in first top level comments:
That’s it !! :
Check this out :
2. https://github.com/praguna/react-comment-section
Thanks for reading through, Have a Great Day :)