React · Theory

Axios DELETE in React

Theory

48/94

Axios DELETE in React

DELETE with axios: await axios.delete('/api/items/' + id) then update UI state — filter that id out. Handle errors (toast). Optional optimistic update: remove first, put back on fail. Auth header if the API needs it.

Don’t leave the row on screen after 204. Don’t delete local state before the server if you can’t roll back.

Axios DELETE in React — click Delete → request DELETE /api/items/1 → list empty. Optimistic UI is extra credit.

Exam tip

DELETE then filter list state.

Example

// Axios DELETE
import { useState } from "react";
import axios from "axios";

export default function List() {
  const [rows, setRows] = useState([{ id: 1, name: "Pen" }]);
  async function remove(id) {
    await axios.delete("/api/items/" + id);
    setRows((rs) => rs.filter((r) => r.id !== id));
  }
  return (
    <ul>
      {rows.map((r) => (
        <li key={r.id}>
          {r.name}
          <button onClick={() => remove(r.id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
}

Axios DELETE in React — click Delete → request DELETE /api/items/1 → list empty. Optimistic UI is extra credit.

Short notes

Call : axios.delete(url).
Then : filter state.
TrapUI out of sync with server.

// Axios DELETE import { useState } from "react"; import axios from "axios"; export default function List() { const [rows, setRows] = useState([{ id: 1, name: "Pen" }]); async function remove(id) { await axios.delete("/api/items/" + id); setRows((rs) => rs.filter((r) => r.id !== id)); } return ( <ul> {rows.map((r) => ( <li key={r.id}> {r.name} <button onClick={() => remove(r.id)}>Delete</button> </li> ))} </ul> ); }

Axios DELETE in React

Example

Short notes

Questions

Axios DELETE in React

Example

Short notes

Questions