How to fetch data from rest api in react js
Fetch data using Fetch API in React JS | Part-1 | React Basics
Timecodes:
[Music]
hey everyone
let's learn how to use api in react.js
using a simple fetch api what is fetch
api
the fetch api provides a javascript
interface for accessing and manipulating
parts of the
http pipeline such as request
and responses it also provides a global
fetch method
that provides an easy logical way to
fetch resources
asynchronously across the network
the fetch api is modern interface that
allows you to make http requests
like get post put delete etc to servers
from the web browsers
in this documentation you can find all
the information to use
fetch api now in this video
we are going to use this json
placeholder api
which will provide us some data in json
format
and let us use different methods like
get our
post as i clicked on the run script
it is giving us some data in json format
this is a documentation to use this json
placeholder
api let's create one file
called fetch api.js inside this api
folder
i am using react snippets here to build
functional component
give any title here
let's create one button and name it as a
fetch api
we are going to use this button to call
api
create one method api get because
we are going to use get request here
i am creating this method using arrow
function
copy this code from documentation and
paste it inside our method
now first line which is fetch contains
url
which we are going to call and then it
will return as a promise
so we will use hand keyword and convert
it to
json data after that we will log this
data call this method in the button
let's not forget to import our component
in the app file
open console
as you can see here on button click we
are getting the data from
the url there is a four different fields
body id title and user id
let's check this url in separate tab
and this is the same as what we get in
the console
let's get all available data we just
have to modify url by removing this id1
and we are good to go
we are now getting almost 100 objects
let me explain again what we did
we are using this fetch method by
passing url in it
this method will written as a promise
which will contain data
so we are using a then keyword and
converting data into
json and after that another then keyword
to
log our data
let us try to store this data in a state
create a use state here
and don't forget to import it
name it as a data and initialize
it with an empty array
remove console.log and inside the curly
braces
paste it and set data with json
let's print this data state using a
json.stringify
and we are getting lots of data here
let's format it a bit inside the
stringify add
null in the place of a replacer and two
for the space
you can do it by using a pre-tag which
stands for pre-formatted tag
save this
now we are getting the data in formatted
manner
if you want to call an api on page load
then we have to use
use effect if you are using a function
component or
component demount method if you are
using a class component
call our method which has api get inside
the use effect
as you can see here we are getting the
data whenever we reload the
page
let us see how you can use this data
state
create a new div and ul tag
inside the ul tag let's use a map
function
this map function will return as an item
which is an
object in this case
we will use li to print item dot title
and it's working great
let's add item dot id as key in the ally
tag
or else or else it will give us a
warning
warning is gone now
let's print user id before title using
item dot user id
and it's working great
that's it for this video in the next
video we are going to talk about the
other methods like
post stay tuned
Related queries:
how to get data from rest api in react js
how to get data from rest api in node js
how to fetch the data from api in react js
reactjs rest api get example
reactjs fetch example
reactjs fetch data from api example
![ReactJS Course [7] - How To Fetch Data From an API in React](https://img.youtube.com/vi/je3FTTunyp4/mqdefault.jpg)
![How To Make An API Request in ReactJS With Axios and Fetch - Tutorial [2020]](https://img.youtube.com/vi/rpg1jOvGCtQ/mqdefault.jpg)
