Fetch data using Fetch API in React JS | Part-1 | React Basics

[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

Channel: CodeBucks

Views: 66,634

Keywords: fetch in react, api in reactjs, fetch data reactjs, fetch data from an API in reactjs, data from api in reactjs, react api call, react restful api call, how to use api in react, get method in react, reactjs get method, API in react, fetch API, codebucks, how to fetch data in react, Fetch data using Fetch API in React JS, Fetch Data from an API in React.js, from an API in React.js, React JS for beginners, reactjs tutorial, reactjs, reactjs developer

Id: 27f3B1qndW8

Length: 6min 55sec (415 seconds)

Published: Wed Dec 02 2020