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;
In this example, we have a button with an onClick
event handler that triggers the handleDelete
function. Inside this function, we use axios.delete()
to make a DELETE request to https://api.example.com/data/1
, where 1
is the ID of the data we want to delete.
These are the basic examples of how to use Axios in React to perform POST, GET, and DELETE requests. Remember to handle errors appropriately and update the component state accordingly.