Axios in React

CRUD operations (Create, Read, Update, Delete) in a React.js application using Axios for HTTP requests

Steps:

1. Install Axios:

npm install axios

2. Create a Fake API for testing:
You can use JSONPlaceholder (https://jsonplaceholder.typicode.com/) or set up a local backend using Node.js/Express.

Full CRUD Example: React + Axios

We’ll create a CRUDApp component that performs CRUD operations on a list of users.

📌 CRUD Operations

• Create: Add a new user (POST request).
• Read: Fetch users from API (GET request).
• Update: Edit user details (PUT request).
• Delete: Remove a user (DELETE request).

📜 Code: React Component with Axios

Create a file CRUDApp.js:

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

const API_URL = "https://jsonplaceholder.typicode.com/users"; // Fake API

const CRUDApp = () => {
  const [users, setUsers] = useState([]);
  const [newUser, setNewUser] = useState({ name: "", email: "" });
  const [editingUser, setEditingUser] = useState(null);

  // 📌 Fetch Users (Read)
  const fetchUsers = async () => {
    try {
      const response = await axios.get(API_URL);
      setUsers(response.data);
    } catch (error) {
      console.error("Error fetching users:", error);
    }
  };

  useEffect(() => {
    fetchUsers();
  }, []);

  // 📌 Add User (Create)
  const addUser = async () => {
    if (!newUser.name || !newUser.email) return alert("All fields are required");

    try {
      const response = await axios.post(API_URL, newUser);
      setUsers([...users, response.data]); // Add new user to the state
      setNewUser({ name: "", email: "" }); // Reset input fields
    } catch (error) {
      console.error("Error adding user:", error);
    }
  };

  // 📌 Update User (Edit)
  const updateUser = async () => {
    if (!editingUser || !editingUser.name || !editingUser.email) return;

    try {
      await axios.put(`${API_URL}/${editingUser.id}`, editingUser);
      setUsers(users.map((user) => (user.id === editingUser.id ? editingUser : user)));
      setEditingUser(null);
    } catch (error) {
      console.error("Error updating user:", error);
    }
  };

  // 📌 Delete User
  const deleteUser = async (id) => {
    try {
      await axios.delete(`${API_URL}/${id}`);
      setUsers(users.filter((user) => user.id !== id)); // Remove user from state
    } catch (error) {
      console.error("Error deleting user:", error);
    }
  };

  return (
    <div style={{ padding: "20px", maxWidth: "500px", margin: "auto" }}>
      <h2>React Axios CRUD</h2>

      {/* Add User Form */}
      <div>
        <input
          type="text"
          placeholder="Name"
          value={newUser.name}
          onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
        />
        <input
          type="email"
          placeholder="Email"
          value={newUser.email}
          onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
        />
        <button onClick={addUser}>Add User</button>
      </div>

      {/* Edit User Form */}
      {editingUser && (
        <div>
          <input
            type="text"
            placeholder="Edit Name"
            value={editingUser.name}
            onChange={(e) => setEditingUser({ ...editingUser, name: e.target.value })}
          />
          <input
            type="email"
            placeholder="Edit Email"
            value={editingUser.email}
            onChange={(e) => setEditingUser({ ...editingUser, email: e.target.value })}
          />
          <button onClick={updateUser}>Update</button>
          <button onClick={() => setEditingUser(null)}>Cancel</button>
        </div>
      )}

      {/* Display Users */}
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name} - {user.email}
            <button onClick={() => setEditingUser(user)}>Edit</button>
            <button onClick={() => deleteUser(user.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default CRUDApp;

📌 How It Works

1. Fetch Users (GET): Data is loaded when the component mounts.
2. Add User (POST): A new user is added when clicking the Add User button.
3. Update User (PUT): Clicking Edit lets you modify user details.
4. Delete User (DELETE): Clicking Delete removes the user.

🛠️ Run the App

1. Add CRUDApp to your App.js:

import React from "react";
import CRUDApp from "./CRUDApp";

function App() {
  return (
    <div>
      <CRUDApp />
    </div>
  );
}

export default App;

Start React:

npm start

Open http://localhost:3000/ in the browser.

Get Krishnakumar’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

✅ Summary

• axios.get(): Fetch data.
• axios.post(): Add data.
• axios.put(): Update data.
• axios.delete(): Remove data.

🌟 Next Steps

• Replace the fake API with your real backend.
• Improve error handling with try-catch and Toast notifications.
• Add Form validation using Yup or React Hook Form.
• Use Redux Toolkit or Context API for state management.