How to Create Listing, Add, Edit and Delete API Using React Axios

We will go over how to Create Listing, Add, Edit and Delete API Using React Axios. This tutorial demonstrates how to use Axios React to consume CRUD API. We will build a simple React.js app that will list the records, add new records, update a record, and delete an existing record using the rest API.

One of the most common tasks of a client-side JavaScript application is to make HTTP requests to get or save data. This will be handled by the AXIOS HTTP client.

The Axios HTTP client is a Promise-based HTTP client for the react/nodejs application.

The AXIOS can be used with both the browser and Node.js. Axios can be installed with npm, bower, or CDN.

Checkout Other Nodejs tutorials:

There are following features of AXIOS HTTP Client:

Make XMLHttpRequests from the browser
Make http requests from node.js
Supports the Promise API
Intercept request and response
Transform request and response data
Cancel requests
Automatic transforms for JSON data
Client side support for protecting against XSRF

The AXIOS HTTP Client Request Parameters

For each axios HTTP request, the following request parameters are common:

baseUrl: A base URL that will be appended to any relative URL.
headers: This is a collection of key/value pairs that will be sent as headers.
params: A collection of key/value pairs that will be serialised and appended to the URL as a query string.
responseType: Defined response type in a format other than JSON.
auth: The HTTP Basic auth string that will be sent with each http request.

The Response Object of Axios

After each successful request, the response object is returned to the then() handler. The callback then() will receive a response object with the following properties: –

data: The payload returned from the server.
status: The HTTP code returned from the server.
statusText: The HTTP status message returned by the server.
headers: All the headers sent back by the server.
config: The original request configuration.
request: The actual XMLHttpRequest object.

Lets create React app using npm

We will create react app using npm command line as like below:

$ npm create-react-app test-axios-app

Now, using the command below, we will install Axios using npm.

$ cd test-axios-app
$ npm install axios

Let’s import axios module into app.js file –

import React, { Component } from 'react';
import axios from 'axios';

For CRUD operations, we will use a third-party API, which we will consume in Axios.

Let’s define emp state –

class App extends Component {
  state = {
    emp: []
  }

constructor(){
super();
}
}

GET Request Using Axios HTTP

Using Axios, we will fire an HTTP get request using the HTTP get method. Rest API endpoints will be passed, and the results will be passed to the react state.

getEmployee() {
  axios.get('https://dummy.restapiexample.com/api/v1/employees')
      .then(res => {
        //const emps = res.data;
        //this.setState({ emps });
        console.log(res.data);
      })
}
componentDidMount(){
  this.getEmployee();
}

Add Record Example Using React Axios

We will use Axios to create a post request and send it to the server API. We will post all form data and attachments via HTTP post call into the react.js application.

onSubmit(e) {
	e.preventDefault();
	const employee = {
		name: this.state.name,
		age: this.state.age,
		salary: this.state.salary,
	}
	axios.post('https://dummy.restapiexample.com/api/v1/employees', employee)
	.then(res => console.log(res.data));
}

Update Records Using AXIOS HTTP PUT Method

We will update the record using the HTTP PUT method, which will take the record id as a parameter and update the record.

update(e) {
        e.preventDefault();
        const employee = {
            name: this.state.name,
            age: this.state.age,
            salary: this.state.salary,
        }
        axios.put('https://dummy.restapiexample.com/api/v1/update/{this.state.id}', employee)
        .then(res => console.log(res.data));
    }

How to Use React Axios Http Delete Method

The Delete http method in Axios is used to delete a record via API. The record id will be passed as a parameter to the Delete rest call.

delete(e) {
	e.preventDefault();
	axios.delete('https://dummy.restapiexample.com/api/v1/delete/{this.state.id}')
	.then(res => console.log(res.data));
}