How to fetch the data from api in react js
How to Fetch and Display data from API in React JS with Modern Fetch API
Timecodes:
hi everyone in this video we'll fetch
data from an API
and display it on the browser using a
feature method so let's get started I
have already installed the project and I
have created a file by the name of which
data so here in this file I will write
my code okay
react function component and Export it
and the first thing is that I should
create a state
cast
records
secretary cards
is equal to use State hook I should use
U State hook
and it is an array which was and also I
will use use effect hook
can I fix the data I will use use Effect
2 yes
and use effect to hook now I will write
the code
seven right
narrow function
and that's why we close
and drag the asset dependency array
dependency
so here I will use the fetch method okay
to fix the data and here the URL I would
like to use this URL
to fetch the data from this URL
and to
the end okay and here I will use
response
response.json I will change the format
to the Json and here
I will use the data array cards
and here I will call this method okay
City cards
it's a colored seated
records and I will assign
data
to the records
okay you will assign the data to that
catch
here
to the club
here
yes we pitch the data and we store that
in the recounts
so it is not like this only sorry just
simply turn like this
and now let's display our records so I
will create a table
and
in the table I will use the
or I will just simply use
eul okay you will list
and here I will use these prices and
Records
dot map
and here we should have two variables
the first one is the least
is in text
let's return a list now okay
first
yes just
simply a list
and here I will show
then let's start ID
and also
let's start name
and I will assign a key of index
so let's run the server what happened
you need to come here and and I'll first
I will import it in the index page
here
which data
use that here
now let's run the server in theme start
yes
the data has switched to okay it is the
data that we have pitched you can style
it using bootstrap or css and display it
in a table and very good I just showed
you how to pitch the data and display
that and
um browser okay so it has the code
it was
it is the example okay so if you have
liked the video please subscribe our
YouTube channel and thanks for watching
Related queries:
how to fetch data from api in react js functional component
how to display data from api in react js using axios
how to display data from api in react js
how to fetch data from api in node.js
how to get data from api in react js using axios
how to display data from api in react js table
how to fetch data from rest api in react js
how to fetch data from local api in react js
how to fetch data from api in react native
![ReactJS Course [7] - How To Fetch Data From an API in React](https://img.youtube.com/vi/je3FTTunyp4/mqdefault.jpg)
