Hello, friends, welcome back.
So when we navigate to one of the article pages on the blog, we want our front end to automatically
query the server and display the comments that the article has.
So the first thing we have to do is we need to add a state to our company.
So currently, our components do not have any state of our component, do not have any form of memory.
They simply return some graphics depending on the props that we pass into that stage.
States give us a place where we can temporarily load our information.
For example, information that we loaded from our side who acts to our component.
We will use one of the reactor, which is called use.
So first we need to import you state from the act.
OK, so we need to use state.
So once we have imported you state, then you're inside the company and we will write fonts and we will
take an edit and we will write the name of the variable, which is article info and the function.
We just set article in full and that is equal to you state.
And initially we can keep it as an object.
OK, instead of an empty object, let's add the property comments, OK, and this will be equal to an
empty edit.
So let's save this.
Now this article infl has initial value, has a property attachment and which is having an initial value
of empty.
So now how do we make the list to the back end to load our article info?
To do that, we need to use another vehicle which is called use effect.
So let's import rules effect as well.
So use effect and now let's see how we use effect works.
OK, so I will write use effect and inside this user we need to call an only function.
So this will be an added function.
And let me so log from Bernard Mounted.
So this use effect runs every time when the component loads or you can say component, Desmonte.
OK, so let me save this file.
Make sure that inside the terminal you are doing npm start.
Let's go to the browser.
And if I inspect.
And if I go to pencil, so as you can see, it is showing company.
So if I refresh the page.
You can see component mounted, so whenever this component is loaded, you will see component mounted.
OK, so every time when this component load, this effect runs, now we need to load data from somewhere.
So let's go to Visual Studio for since the code that we are going to use to fetch the data involves
a synchronized vetting operation which will be using async and await give it inside the effect.
The only problem is that the use effect does not allow the function that the past year to be assigned.
So if you do this, for example.
It will give us an edge, so to use I think we need to define and I think function inside the use effect.
OK, so we need to write consed, let me remove this cancer log.
So we need to define Consed, and the name of the variable will be fetch data that is equal to now.
This can be an amazing function.
So issing and annatto function and we need to take one more variable result.
And this year we need to wait so it fetch.
And we need to define the order from where we need to study to try to take back as Thulin localhost
Bulan eight thousand slash, FBI slash articles slash and then a dollar sign and the name.
OK, this is the other side.
OK, so now after this we need a balanced and that is it going to be that is going to be a deserved
start, Jason.
OK, this is going to be a function now after this little article so that we copied and pasted here
and then we will find this body.
OK, so you and I need to face it.
So let's save this and the all we need to call this Fed state function.
So let me copy and paste it and we will call this function without a word.
OK, let me say this five year old.
Will we need any of it?
OK.
Let's save this, so we need to call this function outside this.
OK, so at this point, let me save this and we need to we need to use the fact that only when the other
environmental changes.
So I take the second argument as an adult and inside this, I'll pass this name.
OK, so let me copy and paste or save this.
And now let's go to the browser.
And as you can see in the console, we are getting some issue.
We are getting an that access to fetch.
And you are from Origin has been blocked by force policy.
So this is an error.
So this is a security related and it happens when we make the request from one region to another to
fix this.
We need to go.
We need to make some modifications in Pakistan, Jason.
So let's go to to the airport and inside this FRINTON directly, we have a package.
Jason OK, so let's open that.
OK, so good at this.
So this is different than the victory package or Jason.
So after this, we need to add one more property, which is proxy, and that is going to be in double
votes.
We need to right at GDP slash global post Phoolan eight thousand slash Anupama.
OK, now let's save this file and let's go to articulate charges.
And we don't require this.
So we need to remove this as DP World and localhost eight thousand and we need to slash slash article
and donate.
OK, let's save this and now let's run those over again.
OK, so let me stop this inside the terminal.
We need to write and be in stock and hit enter.
So let me clear this console and refresh the page.
OK, so let's finish it up in.
So now, as you can see, we are not getting any better, which we were getting earlier.
Now let's go onto longboarding.
OK, so so you're right.
And so long and fast, about a year.
And let's go to the browser and let's see what we are getting inside the body.
So now we are getting the comments here.
OK, so as you can see, user name is me.
And that text is I love this post because we have added a comment for this article, so you'll be able
to see this.
So now in the next video, we will see how to display this comment on the article.
So this is it for this video.
And I've seen the next video.