Hello, friends.
Welcome back.
In this video, we will see how to add a comment with the help of a phone.
So we need to create a new file inside the company folder.
So let's create a new file and name it as add moment form Dotty's and your Albergotti FC and press that.
And we need to add a form.
So you sort of do.
I will take the contact and I'll do some styling for this form.
So I need to add some serious classes.
The last thing that is going to be Sedo, there'd be state expanding from left and right will be eight,
will be six.
Bottom will be eight in what will be four.
And inside this form, we will begin to tag for the heading to the heading will be at the moment.
And we need to do some styling for this.
So last name that is going to be a cell phone to Bill.
Martin, bottom full text with a nine hundred and then after this heading the label that is going to
be named and after that we will take an input which is going to be text input type.
That is going to be text.
Let me close this and we need to add something to this for this label.
So last name that is going to be blocked next to seven hundred text, small font, bold modern bottom
to OK.
And for this input we need some Sears's classes.
So class name that is going to be shadow appearance will be none.
Border will be there.
There will be full training from top and bottom to panning from left and right will be three text three
seven hundred leading will be tight.
This is for line tight.
Focus will be outline.
Non focus, shadow outline.
OK, let's say this and now we need a text area for the moment.
So let's copy this.
OK.
OK, we don't need input, we need text data.
So let's copy only the label and I'll be stuck here.
OK, and the label will be ok and then we need a text area.
So text area for this text data.
I'll take those.
That is going to be four columns will be fifty.
OK, and we need to see this class.
So this will be same as the input.
OK, so this is just classes and I'll be here and then I'll close this text idea.
OK, then after this we need a button to submit the form so button and also we need some status classes.
So class name that is going to be Big Blue.
Five hundred.
We were going to be Big Blue.
Seven in text will be white, font will be ball left, right to the top and bottom to fight for it will
first will be outlined then.
Focus for Shadow will be there to find out.
OK, let's close this button and inside this button, I would like to add comment.
OK, so I comment that saved us now that our basic structure of the phone is ready.
So we need to give some internal state so that it's easy for us to protect our values of this, to input,
input, input, input, experience.
OK, so we will use your state hopefully to import the U.S. state.
So you state that we need to import this state from the act and instead this conference.
I will take a and then edit and take username.
And the name that is going to be used at an initial rally would be and this spring and again, we need
a forest and this is going to be forthcoming.
So coming next, set common text equals to use date.
And this will be an interesting.
OK, now we need to link the state to this text fields that daily prism.
So we need to add value to both the text.
OK, so let's add the value for value prop.
So value and that is going to be what the user name we need to write the user name.
OK.
And for text area of value will be Bomont text.
OK.
And now we need an on team so on change that is going to be a natural function.
OK, we need to pass the event and you're a very smart user name and your event or target thought,
Randy.
Again, this thing, Heidi, Poppy on change and I'm here, but this time the function will be different.
So let me get this straight here, OK?
And everything will remain the same.
Let me say this and then we need a conflict.
OK, so for this potential conflict and the idea of giving out a function that is going to be at the
moment, OK, this is the name of the function at the moment.
OK, so let's close this now.
We need to clear this function at this function is not yet created.
So we need to create this.
So let's create this function.
Let me save this file.
Let's copy this comment.
And at the top, I read this function so good before written and gave a concert.
And the name of the function, which is at the moment, equals two.
And this will be an async function.
So async OK then an added function.
And inside this function, I'll take a punch that is going to be a weight, so you'll be able to make
a post with using fetch.
So that's and they are inside this.
We will go back to slash API, slash articles, slash and then a dollar sign.
And inside the places we will take the articles then.
So this is the article that we will get from this is the opening that we would get from our technologies.
OK, so that we need to do it.
But let's say I did not know then and this is the end point.
OK.
And after this we will take options.
So options on my third.
My third is going to be post.
OK then we need body.
So that is going to be user name and we need something so that is equipped to comment text.
And this should be Jason torturing me.
We need to download this industry, OK, and then we need headers.
OK, so those that is going to be an object and instead of this we will write on type.
So make sure that this is happening on Skype separately.
That is going to be application slash, Jason.
OK, Jason.
And let's see this.
I think there's some issue with this.
So this is going to be OK, let's save this now.
We need the results.
So body that is going to be a great result, Jason.
And after that, we need second article.
And this is, again, going to be a problem because we are getting from which we will get from Article
Dargis and we will find somebody that say this.
Now, this component Adleman Fund does not have this article in full function and as well as this article.
So we need to get this from Article Dargis.
But here we need to be structured this.
So does the name.
OK, and this is set to article info.
OK, let's see this now.
Let's include this component in article.
So insert article Dargis.
I like an old ad coming from from dot org slash company slash ad hominem.
OK, and then we need to follow this.
So I thought about the comment list.
OK, so let's do an ad common form and we need to parse the props.
So the first one is article name.
That is going to be.
This name, okay, so let's be this year, then we need six.
Article in full.
That is going to be sick article in full and let's close this component and save this.
Now, let's take it in the browser.
OK, so let me finish this.
OK, let's do one thing.
This woman should be at the top and then the form.
OK, so let's do this and I just get this out and after this comment, I requested.
So now if I go back to as you can see, the comment is at the top and then we have to fumble.
And one more thing we need to do is after submitting the form, we need the text, which would be empty
so far that I like sick user name and really given a. string.
OK.
And again, for set common text to do in addition to this.
And now let's try it out.
Let's refresh this.
Make sure that everything is running OK in the front end and back and forth.
So now I write the name so me and great article and I am coming.
So we are not able to see the comment.
So let's see what is the issue?
OK.
Let's go back to your A.
So this is at.
OK, let me see this now.
Let's try it out.
So good.
Let me.
Differentiate being.
Annualized rate.
I mean, I think the.
OK, that's at the moment.
So as you can see, some and the other.
So we have successfully added to comment using this form.
OK, and one more thing.
If you want to check this database, you'll need to install some buzz.
OK, so I'm a little DB first.
So I I've already installed it in my machine, so I think you need to just download it right now.
I think it will.
OK, so from here, you can install it.
So I've already installed in my machine, so if I go to campus, let me open, then I'll show you.
OK?
And you need to connect your database.
So let me open this first.
OK, then I'll show you how to connect.
But you need to first install this in your machine.
So there are some instructions on the website 500 to install it in my machine.
OK, so now you need to add your localhost link, so let me show you, you said earlier, Dargis.
Well, this is the link.
OK, so you need to copy this and then you need to go to multiple compass and you know, you need to
be OK and you need to click on it.
So once you connect, it will show you all the database in your local machine.
So my database name was my blog and your articles.
There are three articles and we have added the comments in this article.
OK, as you can see me, I love this post, so we'll get it.
If we want to modify, you can modify it here.
OK.
So if I write something and if I did and now if I go to the browser and they find it this.
So, yes, as you can see, some Utegate, so from here on, you can delete the article, you can add
more articles, you can update your comments and you can remove the damage.
So this is very handy.
If you want your can install and you can just check your database.
OK, so this is it for this.
We do.
And this is it for this note.
I hope you like this because I hope you learn something new from this post about months.
OK, so I'll see you in some other schools and in some of the videos and everything I've uploaded on
the top.
So this is it.
And I've seen some other video than some of those posted so that they can be.