How to fetch data from api in react native any library
Fetching Data from An API in React Native
Timecodes:
what's up guys how is it going welcome
back to the channel in today's tutorial
i'll be teaching you how to fetch data
from an api in react native so if you
found this video to be useful consider
subscribing by hitting the bell icon
and like the video as well without any
further ado let's get started
so this is the site where you'll be
fetching our data from that's the
jsimplacer.typical.com
it's just a free fake api for testing
and prototyping purposes it comes with a
set of sys command resources thus you
can fetch posts comments albums photos
to-do's and also you can fetch users as
well so in here you will fetch in post
so as you can see it retains an array of
objects with a unique id body and a
title
let's copy the link above
so let's get rid of that
let's import usage from react you see it
is a hooking react that retains an array
of two parameters the first one being
the current state and the next one that
manipulates or updates the current state
and passing an empty array which will be
holding our puts
so let's create a constant url
and paste in the link we just copied
so in here we need to import use effects
from here
so this effect is basically used for
rendering side effects and functional
components so within the use of it it
has a copper function and also a
dependency array
let's proceed to fetch the url above
with a fetch method
then we will have a response back
and transform the response into adjacent
formats
we then take the json and set the data
to the json
if you have any error we then use the
catch method with the error as a
parameter
and console.error the error message
let's create one more state for keeping
track of when the data is fetched
let's initially pass in a value of true
so within the use effect
we have far more method as the final so
finally if the data is
will be setting the loading to false
so within the view let's use some curly
braces and write some js synthesis in
there
so we'll be using phenylprotein here
if the state of the loading is true we
have a test component which says
loading
otherwise we'll map through the data and
for each post we'll be having an instant
return of a view
with two test components the first one
will be fetching the title of the post
and the second one
will be fetching the body of the post
itself so let's do so
so the title and the body in here is
what you are trying to fetch
let's give some styles to the post title
a font size of 30 and a front weight of
bold
let's proceed to give the body also some
stylings
let's give it a font size of 15 and a
color of blue
just to differentiate from the title
let's also give stars to the view during
which
the test is found
let's give it a flick of one
align item center and also just file
content center
let's try to check it out
whoa there we go
our data has successfully been fetched
with a boarding title and the body of
the title in blue color
hope you find this video to be useful
consider subscribing and also leave a
comment in the section below you can
share for the video to reach many
see you in our next tutorial
until then stay tuned
