How to Make Axios PUT (Update) Request in React?

How to Make Axios PUT (Update) Request in React?

In the last two tutorials, we already learned about Axios GET requests and Axios POST requests. Now we will learn about how we can make a PUT request using Axios to update the data in react application.

We will make a PUT request to update the data into the database. We will send request parameters in the PUT request and then update the data with respect to parameters. Also, take some examples to send HTTP headers, errors handle, javascript async/await expression in a PUT request.

So let’s start to make Axios PUT request to update the data into the database table and show the success response.

Axios HTTP PUT (Update) Request in React

To install the react application on your machine you can check the details tutorial on how to install react and create an application.

You will need first install the Axios package with the help of NPM. In the next section, we will look at some of the most basic examples of Axios PUT requests. We will also make use of Axios API to make PUT requests.

Install Axios From NPM

You have to run the following NPM command to install the Axios package in your project. Make sure you are in the right directory.

The following command will install all the dependencies for the Axios package, so you can import it into your react component and then use it.

Command to install the axios package
Syntax to import the axios package

Axios PUT Request in Class-Based Component

We will take a class-based react component to make a PUT request using the Axios package. Let’s make handleUpdate() function to make a PUT request click on the button that has a onclick function referred to handleUpdate function.

The handleUpdate() function runs only when you updated the employee data and click on Update button. See the following reference code.

In the above code, we make PUT request in react function called handleUpdate() and then show the result status in render() method.

Axios PUT Request in Function-Based Component

Now we will take a function-based react component to make PUT requests using the Axios. In the function-based component we also have to make a handleUpdate() function to run the Axios PUT request.

And the handleUpdate() function only runs when click on the Update button that refering to this function.

In the above react example, we use the Axios to make a PUT request in the handleUpdate() function and set the response in the state using the useState hook. And then return a success message from the state in return.

Axios PUT Request with Error Handling

In the above two examples, we used only then() promise to return the response and not handle any error while updating the data. So now in this case we will handle the error, we will use the catch() promise method. Let’s see the example code.

This HTTP PUT request with Axios will send the data to update and return the response but if any error exists then the catch() method will return the error message and you can print that error in the component using the state.

Axios PUT Request with HTTP Headers

To send the HTTP headers with PUT requests using the Axios, you have to pass the third parameter as an object of header values. Look at the following example for reference.

In the above code example, we make a const for the header value and then pass it into Axios PUT request as a third parameter. You can also pass any customer headers in that object if you want to do.

Axios PUT Request Using async/await

In the above examples, we used then() promise method to wait till promise returns the response and then continues on further action. But you can also do this same thing with async and await expressions of javascript.

You have to add the async expression before the name of the function and then use the await expression with the Axios request action. See the following example to better understand.

The above function will not proceed with further action until the request gets a response.

Axios PUT Request Using Axios API

The Axios API is the same way to make an HTTP request, you just have to pass the relevant config data to Axios as parameters like method name, request URL, response type, etc.

All the above examples, you can customize to make Axios PUT requests and send the body data with that and then set the response in the state and show it on frontend popup notification like “Record has been updated successfully.”

Conclusion

So in this tutorial example, you learned about the installation of the Axios package and how to import and use it. In this article, we covered how to make a PUT request using the Axios package in react application.

We made different ways of using the Axios PUT request with handling the error, with custom headers, using async/await expressions and Axios API.

You May Also Like

About the Author: Aman Mehra

Hey! I'm Aman Mehra and I'm a full-stack developer and have 5+ years of experience. I love coding and help to people with this blog.

Leave a Reply

Your email address will not be published.