POST, PUT, and DELETE with Axios
Send data to an API using Axios POST and PUT, handle the response to update local state, and implement a delete action that removes an item from both the server and the list.
CRUD Operations with Axios
Beyond fetching data, most apps need to create, update, and delete resources on a server. Axios provides axios.post, axios.put, axios.patch, and axios.delete methods that map directly to HTTP verbs. Each method returns a Promise resolving to the server's response.
POST: Creating a New Resource
axios.post(url, data) sends a request body as JSON to create a new resource. The second argument is the request body object — Axios automatically serializes it to JSON and sets the Content-Type: application/json header. The server typically responds with the created resource including its assigned ID.
const createPost = async (title, body) => {
const response = await axios.post(
'https://jsonplaceholder.typicode.com/posts',
{ title, body, userId: 1 }
);
console.log('Created:', response.data);
// { id: 101, title: '...', body: '...', userId: 1 }
return response.data;
};All lessons in this course
- The useEffect Hook and Dependency Arrays
- Making GET Requests with Axios
- Handling Loading and Error States
- POST, PUT, and DELETE with Axios