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.
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