DEV Community

Cover image for Building a Nested Comment App like Reddit
vigneshiyergithub
vigneshiyergithub

Posted on

Building a Nested Comment App like Reddit

What is this post about ?

Hello fellow humanoids. Today we will try to implement a basic nested comments component in React Js. This post won't be focused much on the styling rather the bare minimum logic required.

Check out the app here : Nested Comment

Nested comment app

Content

  • How to structure a comment
  • How to fetch all comments
  • React Comment component
  • Adding new comment

Lets go deep dive into each one and explore how it was implemented.

How to structure a comment

For this implementation we would be using flat structure to store all comments. This way fetching comment based on ID will be quicker.


comments = {
  id1 : comment1,
  id2 : comment2
}
Enter fullscreen mode Exit fullscreen mode

How to fetch all comments

In this case we would enhance the existing comments from flat structure to nested structure so it can be used to render nested comments.

React Comment component

Let's create a basic comment component with basic utility functions

Adding new comment

Once a new comment is added, based on the parentNodeId we can update the parent node and add a new comment to the comments list.

Conclusion

This app was made as part of learning new components which are used in real life applications.
Stay safe and lend a hand to another :)

Top comments (0)