All language subtitles for 017 Fetching Content_en

So we just learned how to take an array.

On our state and turn it into elements that we can then see right now in a real world scenario, we're

probably not going to hard code the information that we're going to have.

Right.

Normally, we would probably get it from a back end of some kind, some kind of server, some kind of

database.

So I'm going to show you how that would actually work.

Now, luckily, I have a pretty good resource where it will give us a sample of 10 users, right, without

us having to actually build a backend server of some kind.

And it's at this link.

It will give us back is this array of these objects, right, that have these properties like ID and

name and email on it that we will use for our application.

So what we need to figure out is how do we get this app component to make a call to the back end and

then put that data into our state so that our render function knows to use it right now can have access

to it.

So how do we do that?

You see you remember how we got the render method by extending into component.

We also get a bunch of other methods that are called lifecycle mith.

What are lifecycle methods?

Well, if we look at this here, we see a list of all these methods and it's an overwhelming list.

But what lifecycle methods are is they're essentially methods that get called at different stages of

when this component gets rendered.

Now, I know that's kind of jargon right now, but I'm going to explain it to you throughout this course.

But the main one I want us to focus on is component did mount.

Now, what component did Mount does is it's kind of like the name, right?

When this component mounts, mounting is essentially one react, puts our component on the page.

Right.

It renders it onto the DOM for the first time.

When it does that, it it calls whatever block of code we write inside of here.

That's all it does.

So what we want to do is we want to use JavaScript, Native Fach, right to fetch from that you URL

make an API request to that your URL.

And what this fat returns us is a promise, right, but that promise.

Gives us a response of the actual body of our response, but we don't know what that looks like at first,

right.

So let's just log it out and see.

So we see this response object, right?

It's got the body and it's got these headers, it's got all these properties that we don't really care

about.

We don't really need them.

Right.

The main thing we want is we want the body, but we want it in a format that our JavaScript understands

in the format of JSON.

Right.

So let's from here return response JSON, which is a method.

Right, on this response object that will give us back.

That response in the JSON format, which we want.

And then that will get returned to us as a new promise, which we will now have as the body, which

will be this array.

So when we get that array, let's just log it again so that we know what we're getting.

We see Aurora right in the format, in the objects that we know.

And we can use so what we want to do is now we want to call set state, as we did before, but now we

want to set our monsters to this array of these users.

Right.

And we want our initial state to be an empty array because we don't need to hardcoded anymore, right?

We're just going to we're going to wait for our component to mount and then we're going to fetch all

of our users and then we're going to update our state's monster property with this new array of users.

And now when we check our application.

We see that we have all of our monsters or users, right, and we're displaying all their name.

Now we see this area here, right, it's just a warning and it's telling us that we're not using the

logo anymore, so let's just get rid of it.

That's the great thing about create racked up as well, is it comes with LINTANG.

We can be aware of writing and making our code clean.

So now, just to go over this again, we're using this component did Mount Life-cycle method that we

have access to because of our class component.

And we are fetching from this you erl, we are taking the response and converting it into the JSON format

that are JavaScript can understand and use, and then we're going to take the users that we got back

from it and set our monsters to that array of user.

And that's how we end up with this list of.

Users.

In the next section, we are going to now convert this to look a little bit closer to this.