How to use fetch() method in React
Tags: react, webdev, javascript, api
Published: 2020-12-04 07:31:21

##Hi there,

Let's learn how you can use fetch() method in React.
You can call API using this method and also You can use HTTP methods like *GET*, *POST*, *PUT*, *DELETE* etc.

**If you prefer to watch video then you can visit or Just go through the post:**
{% youtube 27f3B1qndW8 %}

First of all, create your React app using,

`npx create-react-app FetchAPI`

We're going to use [{JSON} Placeholder](https://jsonplaceholder.typicode.com/) API in this tutorial to test it inside of the fetch() method.

###What is **Fetch** API?

As mentioned in the official [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) documentation,

>The Fetch API is a modern interface that allows you to make HTTP requests to servers from web browsers.

>Fetch API returns a Promise that resolves to the Response to a particular request, whether it is successful or not.

>The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing.


###Let's Implement fetch() method in our React App:

We're going to refer this [guide](https://jsonplaceholder.typicode.com/guide/) of JSON placeholder API.

Let's create one method which returns us some data from url
**"https://jsonplaceholder.typicode.com/posts"**

```
  //Get Method
  const apiGet = () => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => response.json())
      .then((json) => {
        console.log(json);
      });
  };
```

In above method,

In the first argument of fetch method, we will give it URL from which we're going to get Data.

After that it will return us a Promise, So we will use then keyword to convert response to json after that we will log that json data using *console.log()*. 

Let's create one button to call this method.

{% gist https://gist.github.com/codebucks27/69db3d55ee7bcae0bc54e49fde75d74a/6cb9c2a5dbe0678616764309db21b525010a8890 %}

As an **output** You will get 100 objects just like this:
```
{
  id: 1,
  title: '...',
  body: '...',
  userId: 1
}
```

Let's try to set this data in state.

Create one use state and name it as data.
You can set data state in the apiGet method right after the console.log().

After setting data state we will print it on screen using,

```<pre>{JSON.stringify(data, null, 2)}</pre>```

Where **pre** stands for preformatted tag.

Full Code:
{% gist https://gist.github.com/codebucks27/69db3d55ee7bcae0bc54e49fde75d74a/4a47875b2707878076d717a827399b6be3593136 %}

In the **output** you will get whole JSON response on the screen.

Now if you want to print it and use it then you can use [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function just like this:

{% gist https://gist.github.com/codebucks27/69db3d55ee7bcae0bc54e49fde75d74a %}


That's it for GET method. You can watch below video If you want to know more about how to use **POST**, **PUT** and **DELETE** method. Still if you can not understand it please feel free to give a response I will write another post for it😀.

{% youtube 9BPpaz9DkRU %}

###Thanks For Reading! 😉

Feel free to visit my youtube channel: 
####[@CodeBucks](https://www.youtube.com/channel/UCeYt6blRBKuNrEg_-282fSA)

Follow me on Twitter where I'm sharing lot's of useful resources!
####[@code.bucks](https://twitter.com/code_bucks) 😉