How to Create a Comment Box Using React JS | Blog Application MERN-8 | Intellipaat

[Music] welcome to part eight of M stag blog project Series this is the second last video of this series and with it we are going to see how to make a comment box component for our blog website and we will also create an edit post and post view component for our homepage however before we begin with this I would like to request you guys to enable both the Subscribe button and the bell icon for our inpath YouTube channel today in this video tutorial we are going to create other compan components of our particular blog website such as edit post how to you know show that particular post on our homepage and uh the issue that we faced in last video was that uh our you know loader was not stopping it was not showing that there are no post available because we haven't created any post and uh one more thing uh whenever we will be logging inside our particular um you know app at that time the header was not getting changed so uh in this video we will uh fix all of them issues so first of all uh if you are facing the same issue then just go to your you know uh package Json of your front end folder and at the very end if you will just scroll down and at the end just give this comma over here and write proxy as Local Host 8,000 because we have already created our setup proxy I'll just show you we have created this particular setup proxy but uh we also have to mention this particular proxy inside our uh package Json also so that we have have to mention to our package Jon that there is something coming from our Port 8,000 so for that also mention this in your package Jon now uh let's check whether our error is fixed or Not by doing this much okay so if I'll just move uh to my uh blog website see my um website is already running over here and if I'll just write uh test gmail.com and u 1 2 3 4 5 6 and if I just click on login you can see uh I'm logged into to my particular website so I have created this particular uh blog over here uh one blog and this blog is saved in my database okay if I just uh we have also seen how to you know uh create this particular blog so just to show you that uh this is how our categories will be uh shown when we will add the categories and we haven't created our home post uh card yet that's why it is just showing that home post and if I'll just click on this uh you you can see there are no post detail page so that's why it is just a blank page and you can see uh the URL this is the ID of our particular blog which I have just created okay and if I just move back to my homepage and uh you know um okay we are logged out let me just log in back okay test gmail.com and uh 1 2 3 4 5 6 and if I just log in you can see my header is changed now and uh there are this options over here my Blog log out write and profile okay so what I'll do I'll just click on uh write and over here we will write uh another blog so let's say cloud okay and over here I'm just selecting one file um from my downloads folder I have uh some files downloaded so if I'll just uh uh click on this particular file and we will see why cloud computing is important okay and uh we will also change our category so over here I'm just taking this cloud computing and if I just click on ADD you can see uh we have added a category over here and we have also seen how to add a multiple categories so let's say U this is related to web development so I'll just add web development uh by clicking on this we can remove the particular category as well okay so uh let's try to add two categories for this one okay let's not just take the business let's take keep the web development as as it is okay and over here let's say cloud computing is very important okay and if I'll just click on this create button and uh you can see we are uh redirecting to that particular blog uh which we have just created but right now we don't have that particular blog view that's why this is showing me the blank page so what I'll do I'll just um move to my homepage uh like this and you can see over here uh there are two categories added and there are two uh blogs showing over here because we have created two blogs okay so uh we are done with our uh homepage almost now what we have to do we have to uh create this card view but before that we also have to create uh that particular view which has our you know um blog details so we will create the blog page first and then we will create this particular blog view okay of our homepage so without further Ado let's get started let's quickly move to our vs code and over here if you remember we have created this post detail page okay so uh let's just uh you know create this post detail page okay so first of all let's start by importing everything so let's say import uh first of all Let's uh import use navigate navigate and use parabs so uh for this particular page uh the URL will be changed why the URL will be changed because uh this post detail is based on whatever the ID our post is coming from right so uh for this page what we have to do we have to use our params as well so let's say use params over here and we will also import our comment section so right now we haven't created a comment section but we will do it okay comment from comment from happening components slash comment then uh we will have footer footer then we'll also have Navar then we will import our icons so let's say bi edit edit from my react icons react icon /bi and uh then we have our delete button so let's say import MD delete delete from similar again react icons react icons slmd now uh we'll also need our exos so let's say exos from exos we will need URL so let's say import URL import URL comma if if is image folder because we will be needing an image also from our SL URL now uh we will also need some hooks so let's import that first of all we will be needing a use contacts use contacts use state State and uh we will also need use effect in last video we have also uh learned more about our use contacts and use uh effect hook right so if you haven't checked out that particular video or go to this particular playlist and you can check it now um let's import user contact from our uh context user context okay now uh let's also import our uh loader so we have created a single loader and we will use that particular loader for every components okay whenever our loader is needed from where we will import it from my component SL loader now after doing that uh we will also have one more icon so let's say import FC manager uh um manager from my react icons again react icon /fc okay now we will uh first create the functionalities as usual and then we will move to our UI part okay so before your UH return statement what we will do we will uh create some new States and we will also you know um take our ID and make this page at whatever the ID of that particular blog we are getting we will set this particular page as that so let's do that so let's first create one constant variable uh for the Post ID post ID is equal to use parms params and uh function. ID okay now we will also create one another constant for the Post because um the post data or you can say post detail will be different according to that particular post ID right so we have to set the data according to uh whatever the ID we are getting from the back end right so let's say I have created one post and that ID is um 567 and you have created the post and that ID is 1 2 3 so the detail which you have entered and I have entered is different so how we will fetch it we will fetch it using that particular ID for my blog that is 5678 and for your blog that is 1 2 3 4 so like that uh we will get this particular uh post details so let's just set post over here is equal to use effect sorry use State and initially we will keep it as a empty object okay why object because uh we are creating uh you know there will be multiple fills inside our particular uh blog so for that to store all kinds of data inside our blog we have to uh create an empty object and in that empty object we will store every detail of our particular post now uh we will also get the user because we want to know which user have created which post because we are showing um all the post created by a particular person at single page okay so for that we also have to get the data of which user is creating this particular post uh use contact and user contact now uh let's also keep track of the comments so comments we will also create this comment section don't worry about that okay uh we will see how to get this comment and how this comment will look on our particular Blog Page and everything comment like this and uh initially we will keep our comment as empty string let's create one more variable over here and um let's uh also keep track of our loader status so let's say loader set loader like this and initially we will keep our loader as false use State and we'll keep this as false now uh we will also make use of a navigate all right now uh just like we have done for our home post uh we will also create a function as fetch post okay and uh what we did when we were creating our home post we pass that particular fetch post function inside our use effect hook right so similarly we are going to do that uh over here but just the only difference will be uh over here we will be fetching the comments as well as the post and everything okay so we'll be creating different different functions for our particular um you know functionalities so first of all uh let's start by creating our fetch Force function uh we have already done this in our last video so if you haven't watched that go and check that out fetch post and this function will be async we know why this function will be a sync right now we will also keep our try and cache block inside this just as usual errors and inside this we will also console. log error fine we done with the cach block uh now it's time for our Tri block so in Tri block we will Al only have one uh function or you can say one variable uh that is our response and how we will get the response response will be we will be get using exos so exos doget so we are getting the data for this particular page and when we were creating this particular block we will putting the data so there the method was put but in this case the method is get because we're getting the data and over here we will write the endpoint so our endpoint is/ API SL poost and uh we also have to mention the post ID so let's say post ID like this now uh we also have to set post as whatever we got in response so let's say response dot data now we have a big use of our this particular set post now where we have to use our particular post data we will use this particular post okay so I hope this part is clear to you let's move ahead now after that uh I'm creating one more uh you know handle to delete this particular post but uh here is some catch so let's say if you want to delete some particular post I cannot delete your post or you cannot delete my post admin can only delete his or her post okay so if you have created account in particular blog website and if you have created some post then only you are authorized to delete your particular post right so over here what we will do we will pass our credentials as well so if the credentials if you have the credentials that uh I have logged in and this is my particular post and if that credentials match in that case only we will delete that particular post okay and uh after deleting the post what we will do we will uh generally redirect to our homepage okay now let's um create that particular function so let's say const handle delete delete post is equal to async async inside this we will create a try and catch block so let's say try catch error fine now inside my triy block what I'll do I'll create constant variable as response is equal to a wait wait EXO exhaust dot we have want to delete this right so we will use our function as delete and inside this we will also pass our uh URL so let's say API SL post plus post id id comma we will also pass the credential so let's say with credentials and uh this will be true so by doing this only the user who have created this particular post have the right to delete it now we'll also console log rs. data and you can skip this part also okay uh console logs. data and we will also navigate to our homepage okay so here you can see uh that there are no errors in the terminal and uh also um you know we have completed with our handle delete and handle fetch let's look at the output what uh what we are getting at the Chrome okay so over here you can see uh we are getting a blank screen but instead of that I should get uh something return over here like this so what is the issue over here is if you look at this particular you know URL so this URL is wrong why this URL is wrong I'll just show you so if I'll just move to my app.js over here you see this p is capital so we have to make this p is small and this is not po this is post post ID right there is nothing called post post ID we have posts post ID right so here we also have to uh write s over here now let's uh if I just go back to my output window you can see the post is written over here and uh that means our page is working right now we have to add the functionality so let's continue doing that and if I'll just uh move at the top over here and if I'll just reduce the spacing between this now what we will do we will also uh you know make a use of our use effect and we will um pass the post data to this page so let's say use effect use effect and just like we did uh in last video what we will do we will uh call our fetch post function over here fetch post post like this and uh we'll also pass the post ID so post ID okay I inan post ID okay so now we have our post ID with us now what we will do we will uh create one uh you know also the function to get all the comments on that particular post so for that uh first of all uh let's create a function to fetch the post uh post comment and then we will also create a function to comment on that particular post fetch post comment is equal to we will make this as a sync operation I syc use Arrow key over here we will set loader as true for our commment section okay and we will create one Tri block then we will have one catch block which will catch all the errors and inside the catch block we will console the errors console DOT log error and we'll also set our you know set loer as true like this now uh what I will do inside our Dy block inside a triy block I create one constant response variable const response is equal to a wait exhaust uh again this will be the get operation because we are getting the comments from where we are getting URL plus the end point of our API so what was the that/ API SL comments and uh we also have to give the post slash now here this will be post ID okay why the post ID we we have to mention for which post ID the comments are on otherwise what will happen is uh whenever you are opening you know my comment my blog and someone has commented on your blog so that particular comment will be visible on my particular blog also so I don't want that right so for that reason we will also pass our post ID then what we will do we will set comment we will set comments as data right response. data now we also have to set a loader as false Now quickly mention in the comment section like uh what will be the my next step so those who have suggested that I should use use effect hook they are absolutely right so I'll use make a use of my use effect hook and inside my use effect hook I'll fetch my post comments like this and uh over here as well uh we will make use of our post ID okay now we have our comment as well right now let's create um you know commenting functionality so after this use effect what I'm doing over here is I'm creating one more function so this function will help you comment on our particular uh blog so let's say comment post comment okay and uh this will also be a sync operation because we're sending this particular data to the back end and over here we also have to make use of our e. prevent default right why because whenever we are uh writing anything inside our you know text field and we are trying to submit it our page get reloaded and if our page get reloaded the data will be lost and we don't want any reload happening whenever we are filling any data inside our particular form so we will also mention e. prevent prevent default e do prevent default like this and over here we will make use of our TR and catch right now uh cach block will contain the error also console the error console.log error right now now let's focus in our Tri okay so inside our Tri block first of all we will create one variable as response or you can say a function as response and we will await this we will uh put the data so we have to use post operation over here because we are posting the data to the back end right so we are passing the data from front end to the back end so that's why we are making use of our post now we will mention uh URL so URL plus uh API SL comments okay slash uh create okay okay now uh what we have to pass to this particular uh URL we have to pass the comment we have to pass the you know the person who have created the post and the person who have you know commented on that particular post so uh and we have to pass the ID of the person who is commenting on this particular post so we have to pass so many things over here so let's pass uh everything one by one so if I'll just okay let's keep it like this okay let's also enter over here okay so let's start by the passing the comment so let's say comment and uh comment will be comment uhoh comment like this and U this both c will be small determent comments okay let's move to the top and see what variable we have created so over here we have created only uh comments and set comment okay so we have to create one more uh use State over here uh for the comments okay one will be comment and another will be uh set comments okay so there will be more than one comment as well right so for that we will create our uh comment over here I'm making this as a comment which will be empty string and another will be our const commments when we are fetching the commments commments comma set commments use State and this will be empty array okay so uh let's say let's also change our uh fetch comment over here over here we will pass the comments okay so just give me a second I'll just fix this okay so this will be uh set comments over here H and uh over here uh the comment will be comment and we also have to pass the author author and who is the author the user right and we also have to pass the username user. username and this user is coming from our user contacts right now we also have to mention the post ID so let's say post ID post ID callon post ID and uh we also have to mention user ID colum user doore ID so we have passed this data now we have to pass the credentials so let's say with credentials and we will make this as true okay so we have pass our uh comments as well so we have you know get the comment from the user and we have passed that particular comment to the back end and we have also uh handled the error over here now we also have to do one more thing uh so let's say we have you know stop our window from uh reloading itself why because we have used our e do preven default right so uh whenever the user is commenting on a post so at that point what happens is it will only show me that particular commment when my uh window is is reloaded so what I'll do over here I'll just write uh window location reload true okay so for that particular location my window will get automatically reloaded and after the relo reloading my comment will be visible okay so that we don't have to reload it it will reload itself so over here I'm writing before this uh you know ending of this Tri block I'm writing window do location do reload and inside the sell pass to all right now we are done with our all the functionalities we will move to our UI part so over here I'm just removing this particular part and we don't need this class name over here we will create one more uh first of all Let's uh put the na nav bar over here so let's say nav bar slash now over here what we will do um we have to you know conditionally uh load our loader so if our loader is true we will uh s some different data and if our loader is not true we will s some other data okay for that what we will do we will make our turn make use of our turn operator we will check whether the loader is true or not and if the loader is uh true in that case this condition will be uh shown so for this particular condition we will show the loader right and otherwise we will show our other things okay so what other things we want to show we want to show our post datail so let's do that over here I'm also mentioning this and we'll make this diff okay now errors are gone so here we will start by giving some class name so why this class name we want our loader at the very center of the screen so we'll take atph and uh Flex justify Center item Center like this and with will be full okay so my loader is now at the center now uh we will uh see what we will render in case our loader is false so let's say class name I'm making PX as 8 my MD PX as 200 pixel and my Mt as8 now uh I'll also want some you know box Shadow and everything so this is my outer box of my particular blog so let's say class name also give the border to it border P3 and Shadow like this now inside this I'll create one more Dev class name we will make this display Flex justify between and item center now inside this I want to give an H1 Which is my post title or you can say my block title okay so over here what I'll do I'll give some class names to this so let's say class name so here it will be text 3XL then font will be bold and text will be black text will be Black MD will be text 3 XEL and inside this we will pass the post title so let's say post title post do title title and um we will close our H now if I just move to my output you can see over here uh we have this uh bordered box with the Shadow and with the uh you know title of our particular blog so this is done now we have to move ahead okay so what we will do next is we will uh have to you know give the user the option to edit or to delete so who can edit and delete the post uh the person who have returned that particular blog right so we will only give this particular options to the person who have created this particular block so for that we will uh again make conditional rendering inside this conditional rendering so over here we will check whether the user question mark is true or not uh dot uh dot underscore ID of the post so we we are checking whether the uh person inside the user we have this particular blog ID or not so let's say question mark dot user ID and what what we will do next is we will pass this particular div so inside this particular div we will uh keep two things which is edit button and delete button okay so we have already created the functionalities for the same but first of all let's just uh set the display of that particular uh button so let's say class name first of all making my displays Flex item Center and uh just y center justify Center Space X will be two okay and inside this I'm creating two P tags okay and inside this particular ptag what I'll do I'll um first I'll start by giving some classes so what I want over here is my class name just my cursor to be pointer nothing else okay cursor cursor I want pointer and uh on click click first of all uh we will navigate to our edit post button okay so this button will navigate me to the edit post page so let's say uh navigate where to navigate we want to navigate to edit edit right and uh edit will also have a post ID for editing that particular post so let's say post ID like this and between this P tag I'll also give my bi edit button so if I'll just look at the output um my edit buttons are not visible if I'll just try to refresh this page okay over here you can see this particular edit button over here right on click of this particular edit button I have edit post page okay if I'll just move back and we will stay on this particular page only for now and uh I'm just copying this particular part and uh instead of this edit I'll call the delete handle so I'm just removing this particular function call from here here uh I'm just removing this particular part and instead of that I'm just mentioning my handle delete post and uh over here instead of this I'll mention MD delete MD delete it like this if I'll just show you the output you can see there is this edit button uh delete button and both and on click of the edit button you will be able to edit the post and on click of the delete button the post will be deleted so if I'll just show you I'll click on the delete and this functionality is are not working because we are not log so if I'll just uh log into my particular website and if I'll just show you uh so let's say test at theate gmail.com and uh my password is 1 2 3 4 5 6 and if I'll just log in and if I click on this particular post page you can see this uh over here that should be this uh edit and post button because we have created this particular post from the same website but is not showing so what I'll do I'll just go through the another one uh okay fine so if I just create the post for this particular uh ID so let's say anything over here and uh if I just select any images from here so let's just take this one and uh let's keep this and let's say anything over here and if I'll just click on create my post is created but you can see see here uh still we are not getting this edit and delete button let's see why we are not getting that so so the issue we have over here is uh this will be small D instead of this capital D at the user and you will get uh your delete and edit icon whenever you are logging to that particular uh you know user now now let's move ahead and create our you know uh data of our particular blog so starting with the blog image so first of all we will have the blog image for that I'm creating separate da inside this I'll store all my post data now uh let's start by giving some class name to this particular uh div starting with the you know making my width as 100% uh let's keep it 100% over here giving this as a flex Flex call then also making this justify Center okay now first of all I'll have the image so let's give the SRC over here so uh pause the video for a second and try to think what will be the URL or you can say the SRC of our particular image so I hope you guys have commented that particular U answer in the comment section and uh those who have thought that it will be if are partially true but the correct answer is if Plus post. photo so photo contains the uh you know name and everything of the address of that particular uh photo inside my if folder okay so I is only going to take you to that particular folder but there are lots there will be lots of photos right so we also have to choose that particular photo from that particular folder right so uh this is your answer now let's also give some class names over here starting with the object cover H let's make this as 45 V uh let's also make our MX Auto then mt8 like this and let's also give some alternate images over here and I'm just keeping Blank Space over here now after this what we will do I'll also have my categories so after the image I'll show my description and then I'll have my categories over there so let's start with the description so I'm taking the P tag over here and between this P tag I'm wrapping my post description so let's say post do DC and uh let's also give some class name to our P tag so let's say class name and uhu let's also make this as MX Auto then mt8 then let's also set the width as at VH then border pedding will be five Shadow Xcel okay so that's it for the Post description now uh we have the category so we will create one div and inside this div we will wrap all the categories we will map all the categories all right so uh over here I'm creating uh one div and giving some class names to that particular div starting with my display Flex my content justify Center item Center item Center mt8 and also Space X is equal to 4 let's also make the font bold or let's say semibold okay and inside this I'm creating one P tag and in between those P Tags I'm writing category heading categories like this and um after that I'm mapping all the categories so for that I'm creating separate div and in this particular div I'm wrapping my category so let's also give some styling to this particular div so let's say class name making my display Flex justify Center justify Center item Center and space x two now inside this we will map the categories so how we will map the categories by using this conditional rendering operation okay so let's say post dot uh categories categories like this uh question mark. map if there are any categories available we will pass two things that is uh category comma the index okay so I will act as our unique key let's also uh wrap that inside a div like this and inside this I'm creating another div let's give this div uh key as I and over here we will have uh C okay so C is category and I is our uh key value or prop okay so let's also give some class name to this particular part let's keep make the background as gr 300 let's make this as rounded Excel then uh PX3 and py1 and this is done so after the categories we will have the comments so uh first of all there will be part which shows all the comments which is done on that particular blog and uh after that we will have a section where user can put their comments on okay so let's first get all the comments and then we will create a section where uh user can actually comment okay so creating one Dev over here so over here now let's start by uh giving this D some class names starting with the display Flex justify Center item Center and uh padding three Flex call md4 all right now uh let's also give uh H3 over here and over here we will um just write the heading as comments and then we will uh map the comments okay so what I'm doing over here is I'm okay uh you can take this particular styling from the categories div and you can directly paste that particular particular styling over here so let's say class name and inside this I'm putting this styling okay now uh between this I'll uh give the heading as comments so let's say comments comments like this okay now uh let's map the comment um taking my curly braces let's just check whether there are comments or not so let's say comments question mark comments question mark do map if there are comments available we will map it okay so here C is comment in previous case it was categories right now um as many as comments are there we will render our particular comment. JS file okay we have created our comment. JS right uh let's also give some class name to it um okay uh okay we will style it when we will be creating this comment. JS component okay uh let's give a key prop as C doore ID that is comment ID and uh as a comment we will pass C because C is our comment and for the Post we will give post so let's say post is equal to post like this and now let's close this so we are done with our um comment rering as well now what we will do we will uh create create a section where people can actually comment on right so for that what I'm doing I'm creating one separate div for that so here in this particular div I'll give some class names first starting with my border Flex justify Center Flex call and mt4 and also let's make uh Flex Row for my medium screen fine and now inside this particular part we will have two things first a input tag where people can put the comment and one submit button on click of that button the comment is posted on the blog okay so let's do that starting with creating one input tag over here so let's say input and uh on change of this particular input we will set our set comment right so we will take e as a input and uh we will set comment and we'll also give e. Target do value like this now we Al also have to mention the type so let's say type will be text let's also mention a placeholder so let's say placeholder over here and inside this we will WR write your comment comment like this let's also give some class name to this particular input tag uh starting with for medium screen I'm making my width as uh 80% okay and outline will be none py 2 PX 4 and uh mt4 MD mt0 so this is my input tag now what we will have we will have one button so let's create one button like this and uh on click of this particular button what we will do we will uh call our function that is post commment okay now let's also give some styling to this particular button so let's say class name BG black black black then we have text as SM then uh text will be white font will be semi bold and uh PX will be two py will be two and uh for medium screen my width will be 20% and mty will be four and for my medium screen my empty will be zero let's also add a text to this particular button so let's say add comment and at the end I have added the footer over here okay let me just format this particular document so I'm using prettier over here okay fine so we are done with our post details so if I'll just show you if I'll just move to my browser and if I'll just show you um over here if I'll just log in so over here you can see uh there are this comments because we haven't created this comment section yet so that's why this is showing like this and then we have this um categories the description and our add comment box over here I guess this is looking perfect I just need to change the width size of this particular uh box so let's just do that instead of uh with is equal to 20% I'm making this as a 40% all right so if I'll just go back you can see uh still live want this little longer so let's make this as 50% fine uh this is looking perfect right so now let's move ahead and create this comment section okay so that we we can see the actual comments over here so let's move ahead and do that now let's quickly move to our comment. JS so I'm inside my comment. GS first of all let's start by importing few uh things starting with my exhaust so let let's say exhaust and next thing what I'll be importing is my delete button so let's say MD delete delete from my uh react icons then I'll have my URL then I have uh my Ed context hook then I have my user context so I have already imported my user context but my use context is not imported okay so uh we are done with our importing now let's uh move ahead and create our all the functionalities so that will be uh you know only uh one functionality that that we have to write is create delete the uh created comment so the user who had commented on your post will be able to delete that particular comment okay so if you are commenting on my post I won't be able to delete it but only you will be able to delete that particular part so uh first of all let's fetch the user data so from where we can fetch the user data from our contact user right so for that we will um use of our use contact hook and inside that we will have a user context like this now um we will create our function so let's say const delete delete comment comment is equal to async async and inside this we will also pass the ID of that particular comment and um inside this particular function we will try to uh make use of our try and catch okay so error and uh console do log I like this now inside our triy block uh you can create uh your response variable as well but I'm writing directly over here just to show you that how this works okay but best practice is creating the uh RS variable okay now um we want to delete this so let's say delete and U we will pass the URL over here plus the exit URL will be/ API SL commments like this slash we also have to pass the ID of this particular comment to delete this comment so the logic of deleting the comment and logic of you know deleting the post is almost similar okay and over here we will also pass the credentials because uh we want only the user who have created the comment H will be able to delete that particular comment okay now we also have to reload this window so let's say window location reload and we will make this as true so this part is done now uh let's create our UI so over here I'm removing this comment part instead of that uh let's uh give some class name over here let's say class name like this starting with the PX is equal to 2 p y is equal to 2 then uh let's make background as gray 200 Gr 200 and uh width will be 90 VH then let's make this as rounded LG and M2 fine now inside this I create one more div like this and in that particular div um let's also give some class name over here first making my display is fla item Center then uh justify Center uh justify between and uh first of all we will mention who has commented on that particular uh post so for that I'm taking this H3 and over here we will have ad theate um C do author author okay now let's also give some styling to this particular part so let's say class name uh making my font bold and also um text Will be in gray color uh but here this will be little darker gray so I'm keeping this as a 600 now um let's also create one more Dev over here so let's say Dev like this and also um give the class name over here let's make it as Flex justify Center justify Center item Center and uh Space X is equal to 4 now over here um we will pass the date when the particular comment was created okay so I'm not not giving any styling over here directly between this P tag I'm uh mentioning my date so we know how to render this particular date by using date a new date inside this we will write C do updated updated at we also have to convert this to string like this and then we will slice this 3 to 15 right now what we will do we will uh check whether the you know user who is viewing that particular comment is the user who have commented on that particular post why we are doing this because only if you have posted a comment on my blog then only you will be able to delete this so we have to check whether the user dot under _ ID is equal to C do user ID in that case what we will do uh we will render this particular div and uh inside this particular D we will uh give the option to delete so let's say I'm delete like this let's also wrap this between uh you know P tag so that we can make this as function and uh okay let's uh give some class name to this particular div first and then we will uh style our P tag so starting with making my display a flex item Center justify Center space X2 now uh let's also write our classes for pag so let's say class name and only thing I want over here is cser pointer that's it now uh on click of this particular button so let's say on click what I'll do I'll just call my delete handle right delete comment and uh we also have to pass theore ID over here like this and this is done now if uh both the condition is true in that case I don't want anything to happen over there so the empty string now at the end let's also uh add the comment so let's say p and over here we will show the comment okay so let's say C do comment and the C will be small like this now let's also give some class names over here so let's say class name pxs 4 and empt S2 now let's look at the output C is not defined why C is not defined we have passed the C okay okay okay so in the you know function contacts we also have to take this variable so over here let's take C now C is defined okay over here you can see we have this uh beautiful comments over here and this is looking perfect so that was it for this particular video in next video we will be wrapping our blog website up and U till then keep creating amazing rap projects and I'll see you guys in next one just a quick info guys in telepath of offers a fullstack developer course which enable you to learn textech from both frontend and backend through this course you will gain hands-on experience with the skills and Technologies such as SQL Java data structure JavaScript HTML CSS nodejs and react under the guidance of industrial professionals with this course we have already helped thousands of professional in successful career transition you can check out the testimonial on our Achievers Channel whose link is given in the description below without a doubt this course can set your careers to New Height so visit the course page link given in the description and take the first step towards the career growth with the fullstack developer course

Channel: Intellipaat

Views: 7,110

Keywords: React Building Comments, React Building Comments Application, React Comments System, React Comment Section, React Comments Section, React Comments, React Comment Form, React Comment Library, React Comment Reply, React JS, React, React JS Tutorial, React Tutorial, ReactJS, React JS Project, ReactJS Tutorial, Learn React JS, React JS Crash Course, Learn ReactJS, React Hooks, Chat Application Using React JS, React JS Mock, React Course, React JS Cdn, Intellipaat

Id: TyDomOpaP4I

Length: 62min 51sec (3771 seconds)

Published: Wed Mar 06 2024