How to perform POST, GET and DELETE request using Axios in React

Axios is a popular JavaScript library used for making HTTP requests from a browser or Node.js. It supports various methods like GET, POST, PUT, DELETE, etc., and provides an easy-to-use API for making HTTP requests. In this guide, we'll focus on how to use Axios in React to perform POST, GET, and DELETE requests.

To get started, you'll need to install Axios in your React project. You can do this by running the following command in your project's root directory:

npm install axios

Once Axios is installed, you can import it into your component and start using it. Let's begin with performing a GET request:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  }, []);

  return (
    <div>
      {/* Render data */}
    </div>
  );
};

export default MyComponent;

In the code above, we import Axios and React's useEffect and useState hooks. In the useEffect hook, we make a GET request to https://api.example.com/data using axios.get(). The response data is then set to the data state using the setData function.

Next, let's look at how to perform a POST request:

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

const MyComponent = () => {
  const [inputValue, setInputValue] = useState('');

  const handleFormSubmit = (e) => {
    e.preventDefault();

    axios.post('https://api.example.com/data', { value: inputValue })
      .then(response => {
        console.log('Data successfully submitted');
      })
      .catch(error => {
        console.error(error);
      });
  };

  return (
    <div>
      <form onSubmit={handleFormSubmit}>
        <input
          type="text"
          value={inputValue}
          onChange={e => setInputValue(e.target.value)}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default MyComponent;

In this example, we have a form with an input field and a submit button. When the form is submitted, the handleFormSubmit function is called. Inside this function, we use axios.post() to make a POST request to https://api.example.com/data with the input value as the request payload.

Finally, let's explore how to perform a DELETE request:

import React from 'react';
import axios from 'axios';

const MyComponent = () => {
  const handleDelete = () => {
    axios.delete('https://api.example.com/data/1')
      .then(response => {
        console.log('Data successfully deleted');
      })
      .catch(error => {
        console.error(error);
      });
  };

  return (
    <div>
      <button onClick={handleDelete}>Delete</button>
    </div>
  );
};

export default MyComponent;