fetch

Fetch Data from an API in React.js - Part 12



Sharing buttons:

so we're going to take a look at how you

can fetch data and react from an API now

to do this we're going to be using the

random user API the reason for that is

it's free and it's open source and

anyone can use it without having an API

key so I can just go to API dot random

user dot me and it will return a random

person and we can see here's the JSON it

gives back we can get the result inside

that there's one person it gives us the

gender name location and some other

stuff so we're going to learn how to

fetch this and react and then display

this data on a website so let's move

that to the side and the component I'm

going to do this in I made a new one

called fetch random user and I'm

displaying that right now now before I

learned react I always thought that you

fetched your data and then you then you

rendered stuff so I thought when I was

first time react that you fetch the data

in the render function and then render

it and you don't render anything before

you fetch your data but that is not the

case with how this actually works

instead what we're going to do is we're

going to show some kind of loading

indicator and then we're going to fetch

the data and then when the data has come

in we update and we show the data that

we get so the best place to do this in

is not to fetch your data in the render

function but in the component did mount

so what this means is our component has

rendered at least once and this is

called so we need to have some kind of

loading that we do so we need to know

whether we fetch the data or we've

completed the data so interstate we're

going to have a loading and by default

it's going to be true so what I can do

here is I can conditionally show some

data so I can say this dot state dot

loading then I want to say div loading

dot dot dot

and then if it's not loading I want to

show a person and now we don't actually

have the data for the person yet but you

can see now on the screen first renders

it's going to say loading and now what

we want to do is in our component did

mount is to actually fetch the data so

here's the URL that we can use I'm going

to copy that I'm gonna say cost your L

and now what I want to fetch is using

something called fetch so I'm going to

say Kahn's response is equal to fetch

URL so fetch is going to allow us to

make the HP request to get the data over

here now this is asynchronous and

whenever I'm using asynchronous code I

like to use async and weight and to be

able to do that you need to make the

function asynchronous so we can make

this async by putting the async keyword

there and then I'm gonna say oh wait so

it's gonna make this now synchronous so

it's gonna wait for this async call to

finish and it's gonna store the response

here now the response we can get the

JSON data from it or this stuff right

here by saying kant's dot and I guess I

can call this just data is equal to a

weight response dot JSON so this is an

asynchronous call that as well and this

gives returns us the JSON data and if I

want to I can just console.log this data

now so give that a save and now if I

come to my react app when this mounts we

can see in the loading there's now an

object and we can see we have object

info but more importantly here's our

results so results is an array and we

get that first user so I could say data

dot results and get that first user and

I want to store that in my state so I'm

gonna say person and by default the

person is null and now I'm gonna say

this dot state is equal to update the

person we're gonna say results zero and

we're gonna say grab the first person oh

sorry I'm going to do data dot results

and get the first one and then we have

all this data on the user and we can

render that however you want now so

let's go ahead and finish remove that

console.log and now if this code reruns

we now update the state with a person so

really the last thing now to do is to

actually render this person if he exists

so the person may be null ain't right

there's no there's no indicator whether

it's not so we're gonna say this dots

tape out loading or this thought state

person

is null so we can say not so if the

person is not there then we want to just

say loading otherwise we have a person

so what we can say here is display some

of the data for it so let's have another

div here and I could say this dot state

that person and then I can look at any

of the data I want to select over here

so maybe I want to grab the name and

display the first name last name so I

can say first first name and do better

at spelling and I guess its name dot

first there we go and let's just see if

that displays and we get loading forever

I would see it is my condition wrong

here so this dot state dot loading in

this dot state dot person

so here's what we did wrong is we forgot

to set loading to false up here so

loading is false so when we get a person

we want to set the loading to false and

now we can see Amanda let's give that

last name as well and if we want we can

get the title so let's go ahead and get

the title as well and this is a random

API so you notice every time we load the

page we fetch different data I can grab

the image of this person as well if we

wanted to if so let's do that

so I'm going to say image source and we

need to make sure the closed-off image

this dot state person and let's see is

there a picture yep picture let's do

picture large and come back over here

era picture dot large and now we have a

person of that user so again when the

page first loads we see dot about

loading appears for a second and then

this person appears and so that's the

second that this is all being run so it

renders first by saying loading and then

component did mount gets called we fetch

the data we get the data from the

response and then we update the state so

it's gonna be rendering twice here once

for the initial loading and then a

second time with the new person and so

that is one technique that

be able to fetch data from an API and

then render that data so set up a

loading screen of some sort and then

when that data comes in instead of

loading the loading screen you load this

and again I used this method of

conditionally rendering this if we

wanted to I could do an if statement up

here so this dot state dot loading or we

didn't get a user back and maybe I

wanted to do different conditions here

right so maybe here I say dot dot dot

loading and let's put at the end and

then let's say maybe this state dot

person so let's say we didn't get a

person so didn't get a person otherwise

we come down here and we just render it

so this is another way to do it and this

is a perfectly good way as well so now

same thing occurs but now we have some

different conditions here so now if we

don't get a person so for example if we

were to say pretend this API returns

null give it a save we now say loading

and then we say didn't get a person for

whatever reason so those are the

different ways you can do that and

that's fetching data from an API

you