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?