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
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
}
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)