Fetching Data from An API in React Native

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

Channel: CodeWithDarkwa

Views: 20,277

Keywords:

Id: KJhg761xb3c

Length: 4min 50sec (290 seconds)

Published: Fri Dec 03 2021