SamwithCode

Axios Crud Operation in React 2025 Explain

Axios CRUD Operation in React 2025

1. Install Axios

npm install axios

2. Create Axios Instance (Optional)

// src/api/axios.js
import axios from 'axios';

export default axios.create({
  baseURL: 'https://your-api-url.com/api',
  headers: {
    'Content-Type': 'application/json',
  },
});

3. READ (GET Data)

import { useEffect, useState } from 'react';
import axios from './api/axios';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('/items')
      .then(res => setData(res.data))
      .catch(err => console.error(err));
  }, []);

  return (
    

      {data.map(item => (
        
{item.name}

      ))}
    

  );
}

4. CREATE (POST Data)

axios.post('/items', {
  name: 'New Item',
})
.then(res => console.log(res.data))
.catch(err => console.error(err));

5. UPDATE (PUT/PATCH)

axios.put('/items/1', {
  name: 'Updated Item',
})
.then(res => console.log(res.data))
.catch(err => console.error(err));

6. DELETE

axios.delete('/items/1')
.then(res => console.log('Deleted'))
.catch(err => console.error(err));