All language subtitles for 028 Getting Started with Fetching Data_en

So let's now make sure that we load the data

we store here on Firebase into our application

into our website here

when we load this starting page.

Because at the moment here in the All Meetups page,

we're still using this dummy data.

And that's of course not the goal.

Now to load data from our back and from our API,

we need to send a HTTP request again

just as we send one when we store data.

So in the AllMeetups js file

in the "AllMeetups Page" component

we want to send the request.

The question is, when do we wanna to send the request?

And the answer is whenever this component is being rendered.

So whenever we visit this page.

So what you could do, what could be your first idea,

is that directly in this component function

before we returned to JSX code,

we can "fetch" our data.

We can use the same URL as we used for storing the data.

Since you want to "fetch" data

from the same API and node,

and hence, we can use the same URL here.

Now, we don't need to configure this request here

with this second argument,

because the default is that a "get" request is sent

and that's exactly the kind of request we need here.

We want to send a request to get our data.

So we can call ""fetch"" just like this.

And this will "fetch" this data.

But now, unlike as with the "POST" request

when we sent data, now, when we get data

we are definitely also interested in the response.

Now since "fetch" returns a promise,

we can of course use the "then" method here

and change this after "then" to handle this response.

So we pass an anonymous function to "then"

and here we'll get the response object

as an argument automatically

because that's how the ""fetch"" function works.

It returns a promise, which resolves to the actual response,

at some point in time.

Now, from that response, we want to read the body.

We want to read the data

and we can do that with the "json" method.

That's a method which exists

on this response object out of the box.

And this will give us access

to that data automatically converted from "json"

to a plain JavaScript object.

But here's a gotcha,

"json" will actually return a promise as well.

So we also need to wait for this promise to resolve.

So I actually will return "response,Json" here

and add another "then" block,

where we then get the actual data.

And it's now in this second

"then" block where we can work on that data.

We could also add error handling

and we do that in the complete guide course.

But for the moment here, let's focus

on just getting that data and using that data.

So here in this "then" block, we get the data.

What do we want to do with this data now?

In the end, we want to extract an array

of meetups from that response data and pass that

as a value to the meetups prop on the meetup list.

Now we'll have a problem here though.

Since ""fetch"" returns a promise

and we're in this promise chain, JavaScript does not wait

for this promise to complete before we return here.

Now you could think that we can use "async await"

here to wait until this is done,

but that would be bad because that would mean

that the entire component function now returns a promise

because that's what the "async" keyword does.

It converts this function

to a function that returns a promise

and that then no longer qualifies

as a valid React component

because React component functions must be synchronous

and must not return a promise

but instead they have to directly return JSX.

So we can't use "async, await" weight here.

Hence we can't defer returning a value

until we have a response.

Instead, what we need to do is we need to return

some temporary JSX code, for example, a loading spinner

or something like this.

And then once we have the response, we want to

update the returned JSX code.

And how do we change what's visible on the screen?

With "state".

That's what we learned earlier already.

We can use "state" to change what's displayed on the screen

when certain conditions change.

Before we did that, when the user clicked a button

and we wanted to show an overlay.

Now I want to change the "state" once we have response data.

So for that here in this AllMeetups JS file,

we can import "useState" from React.

So this "useState" hook.

And then register some state here with "useState".

And here we could, for example, set up some loading state.

So name the constant "loading", or "isLoading"

and add a "setIsloading" state updating function.

Because you learned that "useState"

always returns an array with exactly two elements

where the first element is the current state snapshot.

And the second element is a function for updating the state.

And when we have data we want to set "isLoading"

to "false" again, because we're not loading anymore

but actually the initial state here should be "true",

not "false".

So we start in a loading state

and then we set it to false, once we have the data.

And then with that, we could check if we are loading here

in the component function, before we return, I check

if we are loading, and if we are,

then I want to return another piece of JSX code,

where I, for example,

have a section with a paragraph where I say, "loading",

something like this.

So that's my fallback content, which I want to return

in this component whilst we are loading.

And we only return the actual meetup list

if we're done loading, so if we have the data.

But speaking of that,

there we're missing an important point.

At the moment, we're just managing the loading state.

We're not doing anything

with the actual data that is being fetched.

For this we could add another "state" to this component

and that is something we haven't done before

but you can have multiple pieces of "state" in one

and the same component.

As many as you need.

There is no restriction here.

And this could be our array of meetups

and it could be an empty array initially

but eventually we want to override this

once we've "fetched our data from the backend,

from the API.

So here, I'll name this "loadedMeetups"

and "setLoadedMeetups".

And here we want to set "loadedMeetups" to "data" let's say.

That will not be the final step,

but for the moment we can do it like this.

And then we could pass the "loadedMeetups"

instead of the dummy data to our meetups prop down there.

And that means that now

we can also get rid of that dummy data.

So I will delete this dummy data constant.

Now don't save this file yet though, because this code

will cause an infinite loop.

What's the problem here.

The problem is related to "state" and our HTTP request.

You might recall that I mentioned,

when I introduced state,

that when we call this state updating function,

we tell react that it should

re-execute this component function and re-evaluate it

and then return the updated JSX code.

That's the idea of "state".

It allows us to reevaluate a component

and possibly render different content on the screen

whenever state changes.

The problem here is, that we change "state"

once we made our requests.

We change the loading and the loaded meetup state.

Then this component function will execute again.

What does this mean?

It means that this "fetch" function will run again

and we send another request.

And once that's done, we update the state again

which means the component function executes again

and "fetch" is called again and so on and so on.

So we have an infinite loop and that breaks our application

and spams our API with requests.

And it's not something we want.

How can we prevent this?