React Building Comments Application

[@MonsterlessonsAcademy]

WATCH NEXT: React Interview Questions and Answers - Dominate Your Next Interview - kzbin.info/www/bejne/r4Kro2elpd-ShJIsi=51b2XP_84GH3q6oF

[@zacharymedellin6889]

Any chance you have a video or some help connecting all of this work to a mongoDB or some sort of nonSQL? Really loved the video and super helpful for my project.

[@MonsterlessonsAcademy]

@@zacharymedellin6889 I have a video about building API with express and mongodb. kzbin.info/www/bejne/h6uTiJaCpa2sb7c

[@alirezaghadyani16]

test

[@alirezaghadyani16]

testtt

[@alirezaghadyani16]

testttttt

[@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 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.

[@MonsterlessonsAcademy]

You are completely correct!

[@mimi-mh5th]

@@MonsterlessonsAcademy Can you further explain how we can do this. Currently, it seems that each comment is assigned the the 1-level parent id so rendering is not achieved.

[@MonsterlessonsAcademy]

@@mimi-mh5th Unfortunately I can't help with specific implementation of your case.

[@RomainKabasi]

@@MonsterlessonsAcademy good

[@mackzane9624]

@@mimi-mh5th did you find a way for your problem, I am also looking for something like you mentioned?

[@moonkin340]

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.

[@MonsterlessonsAcademy]

If you check any commenting systems like youtube/etc normally it's allowed to have just 1 level on replies on replies. Which means it is not nested indefinitely. It improves performance and simplifies support. This is exactly how I did it in this video. We used parent Id instead of replyID

[@galdinorosas3917]

@@MonsterlessonsAcademy test comment 3rd level

[@jx8551]

@@MonsterlessonsAcademy really there is no third level

[@gabrielfono844]

it is amazing

[@adarshkushwaha3715]

@@MonsterlessonsAcademy great

[@codexjay674]

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

[@MonsterlessonsAcademy]

Glad you liked it!

[@BabalolaYusuf-pm5dt]

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

[@MonsterlessonsAcademy]

Glad I could help!

[@Fatima-yar]

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

[@MonsterlessonsAcademy]

Glad it helped!

[@yourSOULismy]

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

[@MonsterlessonsAcademy]

Best of luck!

[@shikharpandya4927]

thanks a lot sir for an amazing tutorial😍

[@MonsterlessonsAcademy]

Most welcome!

[@jayeshkarkare9334]

Awesome and well explained tutorial.Thankyou

[@MonsterlessonsAcademy]

Glad you liked it

[@karanjathoul8895]

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

[@MonsterlessonsAcademy]

Glad it was helpful!

[@davidgomez6823]

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

[@MonsterlessonsAcademy]

Glad it was helpful!

[@Manpreetkaur-xr7cg]

@@MonsterlessonsAcademy helpful

[@sergioyepes2865]

amazing video monster, thanks for that, greetings from Colombia

[@MonsterlessonsAcademy]

My pleasure!

[@andromadusnaruto1544]

Awesome guide, very helpful. Thank you.

[@MonsterlessonsAcademy]

You are welcome!

[@christopheracevedogalo4825]

@@MonsterlessonsAcademy nice

[@AI_for_funn]

god level teaching , love from india

[@MonsterlessonsAcademy]

Thank you!

[@prashanthdasar-rm2oz]

Sir very thanks for teaching this code.

[@MonsterlessonsAcademy]

It's my pleasure

[@dunder9444]

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

[@MonsterlessonsAcademy]

Glad to hear that!

[@dalimkumar3481]

it was a life saver for me

[@MonsterlessonsAcademy]

Great to hear!

[@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 💀

[@muhammedbojang5495]

wow amazing video. kinda get lost when switching from one file to another i think vs code will be easier to follow along

[@MonsterlessonsAcademy]

Thank you

[@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?

[@MonsterlessonsAcademy]

I would never want to get from backend not flat data. it is not comfortable to work with them or I would directly normalize them in flat array on client. To build nested list you make your BE request slower and you give data to the client in format which is not comfortable to work with.

[@gabrielfono844]

hi sir I build one of my apps and added a comment section using your logic. I wondering how to add time update like on reddit and getting comment update by seconds, min, hour, day , week , month and year. for example if the user comment now , I could display now . after a day , the commnent will be updated to a day , the same week , month and a year. I would really appreciate your answer

[@MonsterlessonsAcademy]

You need to do it on the client. Something like setInterval in every comment which checks the date every N seconds and rerender the date.

[@gabrielfono844]

@@MonsterlessonsAcademy great Thanks

[@joseescalon7506]

Hello! Is there any way the comments don't disappear after refreshing the page?

[@MonsterlessonsAcademy]

No. You either need to implement backend or store them in local storage. I made a video how to implement it on backend kzbin.info/www/bejne/sIWtq5eDpdSUbsk

[@ywb000218]

Thanks for good teaching!

[@MonsterlessonsAcademy]

You are welcome!

[@bimbim1862]

I implemented it in react native and it worked fine. the question is what database is recommended to accommodate this comment?

[@MonsterlessonsAcademy]

You can use any database that you like. It will work everywhere.

[@akashi4414]

realy helpful video, thank u so much

[@MonsterlessonsAcademy]

Glad it was helpful!

[@ifydev]

This was really helpful thanks a lot

[@MonsterlessonsAcademy]

Glad it helped

[@mozartofcode1669]

Great tutorial. Keep it up bro!

[@MonsterlessonsAcademy]

Thanks, will do!

[@DaveTradeFx_01]

Thank you for your wonderful tutorial, can you also make a video that related to graph and charts for visualise data in react js?

[@MonsterlessonsAcademy]

Thank you for the idea! I will add it to the list of future videos.

[@shillo_a]

Just looking for this! Thanks!

[@MonsterlessonsAcademy]

Glad I could help!

[@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?

[@indranathghosh5327]

Great Video! Really helpful. Thanks a lot.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@vireltv256]

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 ??

[@MonsterlessonsAcademy]

Yeap

[@gonalestrelado]

Very good video. Thank you very much!

[@MonsterlessonsAcademy]

You are welcome!

[@SpawnProgram]

Great job! Is there any chance to see MarkDown here? So you can make text bold, italic, have an titles etc. inside comment's.

[@MonsterlessonsAcademy]

Hi, thanks for the idea. I added it to the future list of videos.

[@axelhobrecht2321]

thank you for this gem!

[@MonsterlessonsAcademy]

My pleasure!

[@yadneshkhode3091]

Thank you sir i was looking for this

[@MonsterlessonsAcademy]

Happy to help!

[@МаринаСтепанчук-ч1с]

Thanks for the great video!

[@MonsterlessonsAcademy]

My pleasure!

[@galdinorosas3917]

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

[@galdinorosas3917]

tst 2nd level

[@galdinorosas3917]

test 3rd level

[@galdinorosas3917]

test 4th

[@MonsterlessonsAcademy]

Glad you enjoyed it!

[@muhammadhasan9668]

@@MonsterlessonsAcademy yesbro

[@elbezz]

awesome content, Thanks a lot for sharing!

[@MonsterlessonsAcademy]

Glad you liked it!

[@bellyndayikeza4799]

thanks that was really helpful

[@MonsterlessonsAcademy]

Glad it helped!

[@yaasalu]

Great tutorial

[@MonsterlessonsAcademy]

Glad you think so!

[@keerthanaselvan-pw5el]

Thank you for the video

[@MonsterlessonsAcademy]

Thanks for watching!

[@ВячеславКузнецов-ъ3щ]

Greate 👍 fantastic lesson

[@MonsterlessonsAcademy]

Thanks! 😃

[@pinh4133]

Is super great keep it up bro !!!!!

[@MonsterlessonsAcademy]

Thanks 🔥

[@SajjadHematiNourani]

please make the backend with node as well.

[@MonsterlessonsAcademy]

Here it is: kzbin.info/www/bejne/sIWtq5eDpdSUbsk

[@SajjadHematiNourani]

@@MonsterlessonsAcademy you are a coding God❤I love your work

[@mayanksavaliya9100]

Great video. Any idea how do I extend the functionality of this comment section with ability of tagging users in comment with '@' just like instagram allows dynamically?

[@MonsterlessonsAcademy]

It's more advanced stuff. You need a handler when @ symbol is typed in input and return a list of users from the backend to autocomplete. Also every time when the commend is created you need to past mentioned user on backend and send him a notification.

[@gabrielfono844]

thanks for htis amazing tutorials

[@MonsterlessonsAcademy]

Glad you like them!

[@nifazahamedcs2039]

bro i need help i used your code and developed the ui but ineed to store the comments in aws s3 in json file an d to fetch the s3 items to be dispalyed .

[@MonsterlessonsAcademy]

Unfortunately I don't review custom code because I don't have enough time for that.

[@TheHaribols]

The source code after downloading just has 2 files, one only html and other js

[@MonsterlessonsAcademy]

Did you use the correct url? I think you probably switched to master branch github.com/monsterlessonsacademy/monsterlessonsacademy/tree/144-react-comments

[@TheHaribols]

@@MonsterlessonsAcademy yes I did use the correct branch..anyways I had to manually copy paste the code

[@PIYUSH-lz1zq]

Sir can you bring real world questions like comments section, auto filter, folder structure...

[@MonsterlessonsAcademy]

I will add it in the ideas list

[@keerthanaselvan-pw5el]

Great video!!

[@MonsterlessonsAcademy]

Glad you enjoyed it

[@HeySailorman]

Amazing stuff !

[@MonsterlessonsAcademy]

Glad you think so!

[@yoshihirotogashi6898]

what kind of ide is this? i'm new to programming just started a month ago

[@MonsterlessonsAcademy]

It's Vim. Here is my video about it. kzbin.info/www/bejne/j6Ovmqidec12q80

[@priyanshukhetan6538]

helped a lot, thanks!

[@MonsterlessonsAcademy]

Glad it helped!

[@js_programmer8423]

How do you keep track of user replies..for instance, "who replied to who".. I'm working on a thread and I need it to say: "Micheal replied to Karen" but how do I keep track of who I replied to ( of a child replying to another child) ? Currently, when I'm using this comment thread and I hit reply, it just drops it under the parent root comment with no specificity to who I replied to with this one-level nest.

[@MonsterlessonsAcademy]

You have a parentId and userId. From parentId you can get a parent comment and userId whom you are replying.

[@vijendra1150]

Great Sir 🙌

[@MonsterlessonsAcademy]

Thank you!

[@TheSUMMIE]

Can you show how you would add a backend for this?

[@MonsterlessonsAcademy]

Will add it to the list of future videos!

[@MattisLinstad]

One question - I am trying to replace the static comment array in getComments and instead getting comments from my backend: export const getComments = async () => { await fetch(global.config.server.connection.url + "/Comment", { method: "GET", headers: { 'Accept': 'application/json' }, }) .then(res => res.json()) .then( (result) => { //console.log(result) return result }, (error) => { console.log("ERROR!") } ) }; But now I get an error "cannot read properties of undefined (reading filter) from const rootComments = backendComments.filter( (backendComment) => backendComment.parentId === null ); Please - what am I doing wrong?

[@MattisLinstad]

Got it :) const data = await fetch(global.config.server.connection.url + "/Comment", { method: "GET", headers: { 'Accept': 'application/json' }, }) .then(res => res.json()) .then( (result) => { console.log(result) return result }, (error) => { console.log("ERROR!") console.log(error) this.setState({ error, loading: false, }); } ) return data

[@MonsterlessonsAcademy]

Your array should never be undefined. It is either empty array or array with data.

[@cristianopaul3428]

Any tips on how to go about achieving this using vue.js and quasar ?

[@MonsterlessonsAcademy]

Not really. I didn't use quasar but for vue just create 3 comps with the same logic like we did.

[@mayaraoliveira7034]

Are these comments saved? Or when I press F5 the page refreshes and everything disappears?

[@MonsterlessonsAcademy]

No. I have a separate video for that. kzbin.info/www/bejne/sIWtq5eDpdSUbsk

[@singhvimlesh]

How can I show coment according to date. I mean latest comment shows first and after that another and so on.

[@MonsterlessonsAcademy]

You need to get data from the backend on already correctly sorted order.

[@wafeealkevy1181]

Will the comments be stored/saved?

[@MonsterlessonsAcademy]

No. I have a separate video for that. kzbin.info/www/bejne/sIWtq5eDpdSUbsk

[@cofing_challenge_1]

Why you not use context api

[@katekate5779]

hm, i couldn't use your tutorial anyhow cuz there weren't any html, and it is hard to understand where and how (so css become useless as well) classes and id were set.

[@MonsterlessonsAcademy]

You can find the source code with the whole markup in the description of the video

[@SajalBiswas-v3g]

Thank You so Much

[@MonsterlessonsAcademy]

You're most welcome

[@mariomsumi822]

Thank you very very much

[@MonsterlessonsAcademy]

You are welcome!

[@rokkky19]

Awesome Content!

[@MonsterlessonsAcademy]

Appreciate it!

[@kittichainiwongsa7983]

Thank you for good video

[@MonsterlessonsAcademy]

You are welcome!

[@VitaliiPodhornyi]

How i can join for django Rest Api, can you help me sir ?

[@MonsterlessonsAcademy]

I have a full video on building API for comments in nodejs. You can check that and convert it to django kzbin.info/www/bejne/sIWtq5eDpdSUbsksi=3v1r0Bz5UjK9g5B-

[@aeeweb6464]

Is context best in this case 43:25 ?

[@MonsterlessonsAcademy]

I would not use context for such isolated and sharable module. But it's up to you

[@aeeweb6464]

@@MonsterlessonsAcademy Ok, You are the best thanks ♡

[@akimayenasouleamidou6449]

Good Job!

[@MonsterlessonsAcademy]

Thanks!

[@diegoguatemala5287]

you came after Jesus bro, thanks so much!

[@MonsterlessonsAcademy]

Glad I could help!

[@diegobenitez8952]

how can i hide the default comments that start without any comment my list

[@MonsterlessonsAcademy]

You can remove them in api.js and just leave an empty array there.

[@ShifaAfreenSiddiqui]

thanks a lot for this

[@ShifaAfreenSiddiqui]

Just by the way, in nested comments, why is it that we cant being the user ourselves delete the parent comment without first deleting the reply.

[@ShifaAfreenSiddiqui]

@MonsterlessonsAcademy

[@MonsterlessonsAcademy]

Because in database there is a parent id reference from the child comment. If you delete parent it will lead to delete of all replies. Sure you can do it if this is what you want.

[@thedyslexicwebdev1654]

1:59 data, 5:27 comments, 18:20 replies

[@rushikeshharkare4183]

how we can do multiline commnet

[@MonsterlessonsAcademy]

What do you mean by that? It's a textarea.

[@techasm0]

where comments are storing ?

[@MonsterlessonsAcademy]

As we implement only client side they are stored in variable. But I have a video which implement an API for them kzbin.info/www/bejne/sIWtq5eDpdSUbsksi=cIOW4N9PSdbVWwJ-

[@mineracail4271]

please how to add the @name tage in comment section

[@MonsterlessonsAcademy]

I have a video about it kzbin.info/www/bejne/e3OWqWydmpuqb8U

[@unpluggedaman]

Much appreciated

[@MonsterlessonsAcademy]

You are welcome!

[@MattisLinstad]

Awesome!!!!!!

[@MonsterlessonsAcademy]

Thank you! Cheers!

[@sonaldewangan3108]

Thanks

[@MonsterlessonsAcademy]

Welcome

[@gabrielfono844]

how to bring the same logic with like button so I could count the like easily

[@MonsterlessonsAcademy]

I don't really understand the question. Every time when user likes or dislikes comment you must update info in database on the amount of likes for comment

[@hadiawaleh2463]

please could you show us the database schema

[@MonsterlessonsAcademy]

Hi Hadi, users table: id, name comments table: id, body, userId, parentId

[@hadiawaleh2463]

@@MonsterlessonsAcademyparentId is the user who wrote a comment, while userId is the user who replied to this comment. Is it correct?

[@MonsterlessonsAcademy]

@@hadiawaleh2463 parentId is the id of the parent comment if it is not a root comment. userId is the user who created the comment.

[@nsjustice6803]

Nice video

[@MonsterlessonsAcademy]

Thanks

[@spurgeongnanprakasham]

Nice

[@MonsterlessonsAcademy]

Thanks

[@shantanu391996]

How to tag the user? Can you please tell? 😀

[@MonsterlessonsAcademy]

What do you mean?

[@tuannguyen5904]

@@MonsterlessonsAcademy he mean this

[@MonsterlessonsAcademy]

@@tuannguyen5904 Ahh :) Didn't get that

[@MonsterlessonsAcademy]

You can't directly tag someone on KZbin anymore, but you can use the comment-reply feature to get a similar effect.

[@brssnj54]

@@MonsterlessonsAcademy he means how would you implement a tagging feature

[@Vairadurai]

super

[@MonsterlessonsAcademy]

Thank you

[@uchung2890]

This is not real-time with other user in a post , right ?

[@MonsterlessonsAcademy]

Nope. It's just a React implementation for nested comments without API or sockets.

[@dabbopabblo]

Lmao any youtube dev would throw a fit watching this

[@nonamel5127]

great

[@MonsterlessonsAcademy]

Thanks!

[@whtnmeshdipck7559]

🥰

[@baljotkaur3416]

cg

[@baljotkaur3416]

hi

[@nabinkbhattarai8018]

damm good

[@MonsterlessonsAcademy]

Thank you

[@muhammadhasan9668]

nested cmnt

[@muhammadhasan9668]

1

[@muhammadhasan9668]

2

[@muhammadhasan9668]

3

[@muhammadhasan9668]

4

[@muhammadhasan9668]

5

[@avetiqasatryan1540]

comment

[@julietakocharian889]

.

[@RomainKabasi]

sqs

[@RomainKabasi]

zsc