React Building Comments Application

Learn how to create comments system in React. Comments system is a popular feature for any React project but it's not easy. In this video we will build comments section from scratch with replying, editing and removing comments functionality. We will use plain React with React hooks and build comments list, single comments and comment form components to implement it correctly.

MOST POPULAR COURSES

SERVICES THAT I'M USING

CONNECT WITH ME!

REFERENCES

TIMESTAMPS
0:00 Introduction
2:39 Creating comments components
5:08 Fetching comments
7:29 Adding comments markup
10:15 Rendering single comment
13:10 Rendering replies
18:46 Rendering comment form
27:44 Comment action buttons
36:50 Reply and edit comment form
47:11 Editing comment form

This video is NOT sponsored. Some product links are affiliate links which means if you buy something I'll receive a small commission.

[mr_ani]

For anyone wondering how to nest infinitely or set the max nesting at a predefined level, it is pretty straightforward to do given the code already. Even though like the author said, it is not performant and is discouraged to go beyond 2 levels, it can be done. All you need to do is replace the replies prop that is passed into <Comment> with the getReplies callback, and then get the replies for that comment by calling that callback within Comment. You can also add an extra "nesting level" property to comment which will be incremented whenever you reply a comment. You can then disable the reply button based on whether or not this property has reached the max threshold.

[moonkin]

Thanks for the explanation. Usually when comments can have replies, replies can have replies too. My next challenge is to find out how I can Map a flat array to a tree view and render nested components based on my data.

[codexjay]

Amazing tutorial
This is just what I was looking for 🔥🔥

[Fatima-yar]

Finally found what I really needed! That was awesome!! Thanks! 🎉🎉

[BabalolaYusuf-pmdt]

Just what I've been looking for. Thank you!

[codinginflow]

I like the approach with the flat comment array! Have you ever built such a comment system with pagination? I found that it makes it 10x more tricky 💀

[SteveAnthonyart]

I’m excited to dig into this! So if I have data from the backend like so…

{
feedback: blah blah,
comments: [
{
id: comment1,
content: blah blah,
replies: [
{
id: reply1,
content: blah blah
},
],
},
],
}

…would you flatten the data and patch the replies to look like comments then add parentId’s to them? Or would you approach it differently?

[davidgomez]

Man thank you very much for this, this is lifetime knowledge, very appreciated.

[jayeshkarkare]

Awesome and well explained tutorial.Thankyou

[andromadusnaruto]

Awesome guide, very helpful. Thank you.

[sergioyepes]

amazing video monster, thanks for that, greetings from Colombia

[shikharpandya]

thanks a lot sir for an amazing tutorial😍

[JuventudLLAFederacionER]

Cómo hago para que al actualizar la página, no se borren los nuevos comentarios?
Tenes algún video conectando este código con nodejs y una base de datos para ir guardando allí los nuevos comentarios?

[karanjathoul]

Amazing video. Thankyou for posting such an easy to understand and accurate tutorial..

[dunder]

you are really awesome dude. you saved me from my sanity

[indranathghosh]

Great Video! Really helpful. Thanks a lot.

[yourSOULismy]

Thank you very much. If I get a job, you have my donate. I will buy some courses. Double win for us

[galdinorosas]

this was an awesome video. really appreciate the details and explanations :)

[vireltv]

Thanks for the video ! In a real application when you post/edit/delete we need to use http request from the backend with axios no ??

[prashanthdasar-rmoz]

Sir very thanks for teaching this code.