Delete operation

Always confirm first

Deletion is the one operation you can’t undo. Always ask the user to confirm before deleting.

Backend (Python)
API Client (JS)

@app.delete("/api/users/{user_id}", status_code=204)
def delete_user(user_id: int):
    user = find_user(user_id)
    if not user:
        raise HTTPException(status_code=404, detail="User not found")
    users.remove(user)
    # Returns nothing (204 No Content)

export async function deleteUser(id) {
  const response = await fetch(`${API_URL}/api/users/${id}`, {
    method: "DELETE",
  });
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
}

Simple confirmation with window.confirm

The quickest approach — a browser-native confirmation dialog:

function UserCard({ user, onDelete }) {
  const [deleting, setDeleting] = useState(false);

  async function handleDelete() {
    if (!window.confirm(`Delete ${user.name}? This can't be undone.`)) {
      return; // User clicked Cancel
    }

    setDeleting(true);
    try {
      await deleteUser(user.id);
      onDelete(user.id);
    } catch (err) {
      alert(`Failed to delete: ${err.message}`);
    } finally {
      setDeleting(false);
    }
  }

  return (
    <div className="user-card">
      <h3>{user.name}</h3>
      <p>{user.email}</p>
      <button onClick={handleDelete} disabled={deleting}>
        {deleting ? "Deleting..." : "Delete"}
      </button>
    </div>
  );
}

window.confirm() is perfectly fine for admin tools and internal apps. It’s ugly but it works.

Custom confirmation UI

For a better user experience, build your own confirmation:

function UserCard({ user, onDelete }) {
  const [confirming, setConfirming] = useState(false);
  const [deleting, setDeleting] = useState(false);
  const [error, setError] = useState(null);

  async function handleConfirmedDelete() {
    setDeleting(true);
    setError(null);

    try {
      await deleteUser(user.id);
      onDelete(user.id);
    } catch (err) {
      setError(err.message);
      setConfirming(false);
    } finally {
      setDeleting(false);
    }
  }

  return (
    <div className="user-card">
      <h3>{user.name}</h3>
      <p>{user.email}</p>

      {error && <p className="error">{error}</p>}

      {confirming ? (
        <div className="confirm-delete">
          <p>Delete {user.name}?</p>
          <button
            onClick={handleConfirmedDelete}
            disabled={deleting}
            className="btn-danger"
          >
            {deleting ? "Deleting..." : "Yes, delete"}
          </button>
          <button onClick={() => setConfirming(false)}>
            Cancel
          </button>
        </div>
      ) : (
        <button onClick={() => setConfirming(true)}>
          Delete
        </button>
      )}
    </div>
  );
}

Two states: confirming (are we showing the confirmation?) and deleting (is the API call in progress?). The user clicks Delete → sees “Yes, delete” / “Cancel” → confirms → item is removed.

Updating the parent’s state

The parent removes the deleted item from its list:

function UserDashboard() {
  const [users, setUsers] = useState([]);

  function handleDelete(userId) {
    setUsers(prev => prev.filter(u => u.id !== userId));
  }

  return (
    <div>
      {users.map(user => (
        <UserCard
          key={user.id}
          user={user}
          onDelete={handleDelete}
        />
      ))}
    </div>
  );
}

.filter() creates a new array without the deleted item. This is the standard pattern for removing items from a list in React.

prev.filter(u => u.id !== userId) keeps every user whose ID does NOT match the deleted one. Simple, immutable, and correct. You’ll use this pattern alongside .map() for updates and [...prev, newItem] for creates.

The three state update patterns

You now have all the CRUD state updates:

// CREATE — add to the end
setUsers(prev => [...prev, newUser]);

// UPDATE — replace the matching item
setUsers(prev => prev.map(u => u.id === updated.id ? updated : u));

// DELETE — remove the matching item
setUsers(prev => prev.filter(u => u.id !== userId));

These three lines are the entire state management for a CRUD application. Memorize them — you’ll write them in every project.

All three patterns create new arrays instead of modifying the existing one. This is immutable state updates — React requires this to detect changes and re-render. Never use .push(), .splice(), or direct assignment on state arrays.

What’s next?

You’ve built all four CRUD operations. Now let’s see the complete picture — a full example with everything wired together from backend to frontend.

Full example walkthrough

See a complete CRUD application with React and FastAPI working together

Setup

Connecting React to FastAPI

Building a CRUD app

Production patterns

Always confirm first

Simple confirmation with window.confirm

Custom confirmation UI

Updating the parent’s state

The three state update patterns

What’s next?

Full example walkthrough

​Always confirm first

​Simple confirmation with window.confirm

​Custom confirmation UI

​Updating the parent’s state

​The three state update patterns

​What’s next?

Full example walkthrough

Always confirm first

Simple confirmation with window.confirm

Custom confirmation UI

Updating the parent’s state

The three state update patterns

What’s next?