React Axios Tutorial- Send Asynchronous HTTP Delete Request

React Axios- Send Asynchronous HTTP Delete Request In React

Being a React developer, it’s quite significant to know how to delete a resource on the server.

So, in this React tutorial, we will learn step by step, how to make asynchronous HTTP delete request in React JS app.

 

I hope that most of you already know that the word asynchronous, in relation to computer science, means that what doesn’t happen at the same time. It’s a new technique that helps process a single HTTP request using a non-blocking I/O.

The React developers use Asynchronous HTTP for the process when the client is interviewing the server for awaited responses.

HTTP delete request an ideally used to remove or delete a resource or data object from the server.

 

The HTTP methods are used to create a consensus with the remote server. We have to use the Axios package for establishing communication with the server.

Axios package is a Javascript client-side library that allows us to make an HTTP request. We will use Axios to send the HTTP delete request to remove the single data object using the object id in a React app.

 

How To Make Asynchronous HTTP Delete Request In React With Axios

Step 1- Download React Project

Step 2- Create Demo JSON Server

Step 3- Install Axios Library

Step 4- Set Up User Component

Step 5- Update App Js File

Step 6- View App In React

 

Let’s learn in detail now:

Step 1- Download React Project

The very basic step is to install or download the new React project by using the below-given command after opening the terminal app:

npx create-react-app react-blog

 

Further, w need to enter into the app by using the given command:

cd react-blog

 

Step 2- Create Demo JSON Server

In this step, we will see to use the demo JSON server which would allow us to create a demo REST API. Then, we have to type and run the given command on our terminal.

JSON Server is a notable module that we can use to build demo REST JSON services effortlessly and quickly.

npm install json-server

 

To create the fake REST API, we only need a JSON file in which we have to add the sample data into it.

Therefore, we will create a new db.json file in our React project. Then, we would insert some data into the file as given below:

{
  "users": [
    {
      "id": 1,
      "name": "Anthony"
    },
    {
      "id": 2,
      "name": "Bruce"
    },
    {
      "id": 3,
      "name": "Ronni"
    }
  ]
}

 

Following is the command that has to be run through the terminal:

json-server --watch db.json --port=5555

 

Step 3- Install Axios Library

Further, we head over to the terminal and again, we type a new command since this command will help us install the Axios client in React app:

npm install axios

 

Step 4- Set Up User Component

Here, in this step, we will get to know how to use React hooks in functional components, make HTTP Post, get and most importantly delete requests.

Then, we create components/ folder in our project.

Afterward, we have to create a Users.js file in components folder.

Now, we are ready to import the required module and code into the user component file:

import React, { useState, useEffect } from 'react'
import axios from 'axios'
export default function Users() {
  const [items, setItem] = useState([])
  const [naveProp, initNameProp] = useState('')
  const URI = 'http://localhost:5555/users'
  const sendRequest = async () => {
    try {
      const res = await axios.get(URI)
      setItem(res.data)
    } catch (e) {
      console.log(e)
    }
  }
  useEffect(() => {
    window.addEventListener('load', sendRequest)
    return () => {
      window.removeEventListener('load', sendRequest)
    }
  }, [items])
  const onFormSubmit = async (e) => {
    e.preventDefault()
    const post = { name: naveProp }
    try {
      const res = await axios.post(URI, post)
      console.log(res.data)
    } catch (e) {
      alert(e)
    }
  }
  const removeUser = async (id) => {
    try {
      const res = await axios.delete(`${URI}/${id}`)
      console.log('Item successfully deleted.')
    } catch (error) {
      alert(error)
    }
  }
  return (
    <div>
      <form onSubmit={onFormSubmit}>
        <div className="mb-3">
          <input
            type="text"
            className="form-control"
            value={naveProp}
            placeholder="Add name"
            onChange={(e) => {
              initNameProp(e.target.value)
            }}
          />
        </div>
        <button type="submit" className="btn btn-dark mt-3 mb-4">
          Create
        </button>
      </form>
      <ul className="list-group">
        {items.map((res) => {
          return (
            <li
              className="list-group-item d-flex justify-content-between align-items-start"
              key={res.id}
            >
              <div className="ms-2 me-auto">
                <div className="fw-bold">{res.name}</div>
                <small className="remove" onClick={() => removeUser(res.id)}>
                  Delete
                </small>
              </div>
            </li>
          )
        })}
      </ul>
    </div>
  )
}

 

Step 5- Update App JS File

Now, we will update the component into the App.js file for testing the app:

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import Users from './components/Users'

export default function App() {
  return (
    <div className="container mt-3">
      <Users />
    </div>
  )
}

 

Step 6- View App In Browser

Here, we have reached the final step where we need to view the app in the browser. We can now check out how to remove or delete data with an HTTP delete request in React.

The below command would be used to start the React app server:

npm start

 

Conclusion

In this React Axios Delete Request tutorial, we have learned to use Axios with React step by step. Hope that this simple and quick guide of simplifying the fundamentals of the Axios delete method is found to be an interesting one to you.

 

Thanks