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.
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.
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
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.
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
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.”
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.