How to Use HTTP PATCH Method in React JS

In this article, we are going to learn about the HTTP Patch Method in React JS. Making a request using the Patch method is a common thing when working with APIs. Since we know how to access API, we mostly use fetch() and axios(). So we will make patch requests using these two methods.

What is the HTTP PATCH Method in React JS?

The patch method is the same as a put method, which sends data without showing background processes, but there is a difference between put and patch is, PUT is a method of modifying resources where the client sends data that updates the entire resource. In the patch method, only modified resources will be updated.

Sending HTTP requests with any verb is made simple by the Fetch API (built-in) and libraries such as Axios. The Fetch API is a built-in browser method for performing HTTP requests, whereas Axios is an external package we must install in our project before using.

HTTP PATCH Method in React JS: Fetch()

The fetch() is a built-in JavaScript function that allows us to make network-related requests. It is simple to use, and it doesn’t need any external package to use. It returns a promise that resolves to a response object, which is useful when accessing response data.

Let’s see an example, in the below example we have created a function in which we are going to use fetch an API using fetch(). We have put a URL of API in this fetch method, and we have to specify the type of response that should be in JSON format and the method to PATCH since the default is GET. Now in the body part, we can add those fields that be modified like here email and first_name. Then we can just return this data as a response and convert it into JSON format again. If we log this data, we will get updated data.

1let PatchRequest = () => {
2// sending PATCH request with fetch API in javascript
3fetch("https://reqres.in/api/users/2", {
4 headers: {
5 Accept: "application/json",
6 "Content-Type": "application/json"
7 },
8 method: "PATCH", 
9 // Fields that to be updated are passed
10 body: JSON.stringify({
11 email: "hello@reactcom",
12 first_name: "react"
13 })
14})
15 .then(function (response) {
16 // console.log(response);
17 return response.json();
18 })
19 .then(function (data) {
20 console.log(data);
21 });
22};
23PatchRequest();
24

HTTP PATCH Method in React JS: axios()

Axios is another popular library for making network requests in React. It is an external library that needs to be imported and installed in the React application. Axios is a promise-based library that makes it easy when work with network requests. It is also a much more powerful and flexible method than fetch as well. Here is a basic example of Post method with Axios:

Now in the below example, we have to import axios, to work with network requests. To use the PATCH method in Axios we can use axios.patch(). The axios.patch() method returns a promise, so we use the await keyword to wait for the response. and we can then modify data, and these data will automatically get modified. we don’t need to convert it to the JSON format, We then log the response data to the console.

The Axios method is pretty simple and has less code to work with, so Axios looks much cleaner than the fetch() method. One more thing to note is that to use the post method, we should use .catch(), to perform error handling and it is essential.

let PatchRequest = () => {
// sending PATCH request with Axios API in javascript
axios.patch("https://reqres.in/api/users/2", {
 email: 'hello@react.com',
 first_name: 'react'
})
.then(response => console.log(response.data))
.catch(error => console.error(error))
}
 PatchRequest()

HTTP PATCH Method in React JS: Class Components

As we have seen, in both examples of the fetch and axios method, you can implement these in any component either class or functional. In the class component, you should make API calls in the componentDidMount() method, and in the functional component we often make API calls in useEffect() hook. Here is a basic example to understand:

Functional component:

1import { useState, useEffect } from 'react';
2const App = () => {
3 const [posts, setPosts] = useState([]);
4 useEffect(() => {
5 let PatchRequest = () => {
6 // sending PUT request with fetch API in javascript
7 fetch("https://reqres.in/api/users/2", {
8 headers: {
9 Accept: "application/json",
10 "Content-Type": "application/json"
11 },
12 method: "PATCH", 
13 // Fields that to be updated are passed
14 body: JSON.stringify({
15 email: "hello@geeky.com",
16 first_name: "Geeky"
17 })
18 })
19 .then(function (response) {
20 console.log(response);
21 return response.json();
22 })
23 .then(function (data) {
24 console.log(data);
25 });
26};
27PatchRequest();
28, []);
29 return (
30 // ... consume here
31 );
32};

Class Component:

1import React, { Component } from 'react';
2class App extends Component {
3 constructor(props) {
4 super(props);
5 this.state = {
6 posts: [],
7 };
8 }
9 componentDidMount() {
10 let PatchRequest = () => {
11 // sending PUT request with fetch API in javascript
12 fetch("https://reqres.in/api/users/2", {
13 headers: {
14 Accept: "application/json",
15 "Content-Type": "application/json"
16 },
17 method: "PATCH", 
18 // Fields that to be updated are passed
19 body: JSON.stringify({
20 email: "hello@geeky.com",
21 first_name: "Geeky"
22 })
23 })
24 .then(function (response) {
25 console.log(response);
26 return response.json();
27 })
28 .then(function (data) {
29 console.log(data);
30 });
31};
32PatchRequest();
33 }
34 render() {
35 return (
36 // ... 
37 );
38 }
39}

You may Also like:

• How to Make E-commerce Product Card Using ReactJS
• How to Make Image Slider In React
• How to Make QR-Code Generator in React
• How to Make Quote Generator in React