Halo teman-teman semuanya, pada artikel ini kita akan belajar bagaimana cara membuat proses delete data di dalam Astro dan React. Sebenarnya kita cukup menambahkan 1 method saja di dalam component React untuk proses delete data. Langsung saja teman-teman ikuti langkah-langkah berikut ini.
Langkah 1 - Membuat Method deletePost
di Component React PostsIndex
Silahkan teman-teman buka file src/components/PostsIndex.jsx
, kemudian ubah semua kode-nya menjadi seperti berikut ini.
//import useState dan useEffect
import { useState, useEffect } from "react";
//import api
import api from "../services/api";
export default function PostIndex() {
//ini state
const [posts, setPosts] = useState([]);
//define method "fetchDataPosts"
const fetchDataPosts = async () => {
//fetch data from API with Axios
await api.get("/api/posts").then((response) => {
//assign response data to state "posts"
setPosts(response.data.data.data);
});
};
//run hook useEffect
useEffect(() => {
//call method "fetchDataPosts"
fetchDataPosts();
}, []);
//method deletePost
const deletePost = async (id) => {
//delete with api
await api.delete(`/api/posts/${id}`).then(() => {
//call method "fetchDataPosts"
fetchDataPosts();
});
};
return (
<table className="table table-bordered">
<thead className="bg-dark text-white">
<tr>
<th scope="col">Image</th>
<th scope="col">Title</th>
<th scope="col">Content</th>
<th scope="col" style={{ width: "15%" }}>
Actions
</th>
</tr>
</thead>
<tbody>
{posts.length > 0 ? (
posts.map((post, index) => (
<tr key={index}>
<td className="text-center">
<img
src={post.image}
alt={post.title}
width="200"
className="rounded"
/>
</td>
<td>{post.title}</td>
<td>{post.content}</td>
<td className="text-center">
<a
href={`/posts/edit/${post.id}`}
className="btn btn-sm btn-primary rounded-sm shadow border-0 me-2"
>
EDIT
</a>
<button
onClick={() => deletePost(post.id)}
className="btn btn-sm btn-danger rounded-sm shadow border-0"
>
DELETE
</button>
</td>
</tr>
))
) : (
<tr>
<td colSpan="4" className="text-center">
<div className="alert alert-danger mb-0">
Data Belum Tersedia!
</div>
</td>
</tr>
)}
</tbody>
</table>
);
}
Dari perubahan kode di atas, pertama kita membuat method baru dengan nama deletePost
. Method ini akan dijalankan saat button delete diklik, karena di dalam button kita tambahkan event onClick
yang mengarah ke dalam method tersebut.
<button onClick={() => deletePost(post.id)} className="btn btn-sm btn-danger rounded-sm shadow border-0">DELETE</button>
//method deletePost
const deletePost = async (id) => {
//...
}
Di dalam method di atas, kita melakukan delete data menggunakan Axios
dengan method DELETE
.
//delete with api
await api.delete(`/api/posts/${id}`)
Jika proses delete data berhasil dilakukan, maka kita panggil method fetchDataPosts
. Tujuannya agar data yang ditampilkan diperbarui.
//call method "fetchDataPosts"
fetchDataPosts();
Langkah 2 - Uji Coba Delete Data
Sekarang silahkan teman-teman coba klik button DELETE
di salah satu data yang dimiliki, jika berhasil maka kurang lebih seperti berikut ini.
![](https://cdn.jsdelivr.net/gh/maulayyacyber/assets-articles/astro-react/post-delete.png)
Kesimpulan
Pada artikel kali ini kita semua telah belajar bagaimana cara melakukan proses delete data di dalam React menggunakan Axios
dengan method DELETE
.
Jika teman-teman ada kendala saat belajar, jangan ragu-ragu untuk bertanya melalui kolom komentar dibawah atau juga bisa melalui group Telegram dari SantriKoding.
Terima Kasih