Okay, it's time to start thinking about getting the data from our API.
And to do that in a react component, we need to think about synchronizing with effects, and some components
need to synchronize with external systems.
For example, we might want to control a non react component, set up a server connection, etc. but
effects let us run some code after rendering so that we can synchronize our component with some system
outside of react, and our API server is for sure outside of react.
So let's see how we can use a Useeffect to go and fetch data from our API.
So inside here, then let's remove our states and let's remove the two products we have inside here.
And we're going to start off with an empty array.
Let's comment out or not comment out I'll leave the ad product as it is yet.
I'll leave the ad product as it is.
It looks nasty, but it's not going to cause us any issues.
And in fact the red annoys me.
So what we can also specify inside the states and we will be using TypeScript, but just to remove the
annoying warning because if we hover over this warning.
It looks pretty horrible.
We're going to take a look at TypeScript and help you understand these nasty, nasty looking warnings
because they can be pretty ugly.
But if we take a look at the type of thing we're storing inside our usestate, when we do remove the
initial values, then it's got a type of never array.
And let's just give this a type so that the complaints go away.
And to give this a type we open angle brackets and we'll open curly brackets.
And then we can specify a name of type string and a price of type number.
And this should have resolved that problem.
And then we just need to specify that this is an array.
And giving it this type then removes the nasty looking warnings that we had.
Now let's make use of a useeffect and we'll say use effect.
And we open parentheses.
And then we open more parentheses because we supply this use effect.
If we look at the documentation for this then this is an imperative function that can return a cleanup
function.
Okay.
Well that doesn't tell us very much about this, but the way that we use this is we provide this with
a callback function.
So we create parentheses, then the arrow and then curly brackets.
And importantly this function as well.
Although we're not getting any linting help with this.
We do need to specify dependencies but they're not required.
It does say if present, this effect will only activate if the values in the list change.
Okay, so not particularly clear there, but whenever we create a use effect we do need to give this
an array of dependencies.
And when these dependencies change, then the idea is that the use effect runs again to attempt to synchronize
with the external state our API.
Now we're not going to have any dependencies in here, and if we do not have any dependencies, then
this use effect is only going to run once when this component first mounts.
Inside this use effect, let's use a JavaScript fetch function to go and get some data from our API.
So we use fetch.
And then for the time being, I'm just going to hard code the address of our API server.
So that's going to be https localhost colon 5001.
Forward slash API forward slash products.
And then, because the fetch returns a JavaScript promise, we can specify dot.
Then as to what do we want to do when this promise is returned to us.
And we can get hold of the response.
And because this fetch is a JavaScript fetch, then in order to get the data out of this, we need to
use response dot JSON and execute this.
And then this will give us a list of products.
But in order to use that list of products, we need to use Len again.
And then at this point we'll have our products.
In fact, I'll just call it data.
And then we can use our set products method to set the products to what we get back from the API.
Now, just to set your expectations accordingly, this is not going to work, but we can take a look
at why it's not going to work.
If we go back to our browser, Then we're going to get some nasty looking warnings inside here.
But let's just refresh the page and see what has happened.
Now it tells us that access to fetch at https, localhost, etc. from origin has been blocked by a Cors
policy.
No access control allow origin header is present on the requested resource.
Now.
Cors Cross-origin Resource Sharing is a browser security feature that will prevent us from accessing
data if it doesn't have a specific header in the response that allows us to access that data, and this
is controlled by our server side.
So it's something that we need to configure in the API.
Now in the next lesson we're going to do two things really we're going to set up cause which is just
a tiny little tweak on our API.
And we also do not want our API to be running on Https and our client to be running on HTTP.
We want Https for everything.
So we're going to set up both of those things in the next lesson, so that our request to go and get
this data works.
And we'll take a look at that next.