Halo teman-teman semuanya, di artikel sebelumnya kita telah belajar bagaimana cara membuat proses edit dan update data di dalam React.js. Maka di artikel kali ini kita semua akan belajar bagaimana cara membuat proses delete data di dalam React.js.
Langkah 1 - Menambahkan Button Delete
Pertama-tama, tentu saja kita akan menambahkan 1 button baru di dalam halaman post index, dimana ketika button tersebut di klik maka akan menjalankan sebuah method / function untuk melakukan proses delete data ke dalam server.
Silahkan buka file src/pages/posts/Index.js, kemudian cari kode berikut ini :
{ posts.map((post, index) => (
<tr key={ post.id }>
<td>{ index + 1 }</td>
<td>{ post.title }</td>
<td>{ post.content }</td>
<td className="text-center">
<Button as={Link} to={`/posts/edit/${post.id}`} variant="primary" size="sm" className="me-2">EDIT</Button>
</td>
</tr>
)) }
Dan ubahlah menjadi seperti berikut ini :
{ posts.map((post, index) => (
<tr key={ post.id }>
<td>{ index + 1 }</td>
<td>{ post.title }</td>
<td>{ post.content }</td>
<td className="text-center">
<Button as={Link} to={`/posts/edit/${post.id}`} variant="primary" size="sm" className="me-2">EDIT</Button>
<Button onClick={() => deletePost(post.id)} variant="danger" size="sm">DELETE</Button>
</td>
</tr>
)) }
Di atas, kita menambahkan 1 button baru dengan nama DELETE dan di dalamnya kita berikan event onClick yang menuju ke dalam method yang bernama deletePost. Dan di dalamnya kita berikan parameter berupa ID dari data post.
<Button onClick={() => deletePost(post.id)} variant="danger" size="sm">DELETE</Button>
Jika project React.js dijalankan, maka kita akan mendapatkan sebuah error, itu karena kita belum membuat method yang bernama deletePost tersebut.
Langkah 2 - Menambahkan Fungsi deletePost
Sekarang, kita lanjutkan untuk menambahkan method deletePost. Masih di dalam file yang sama yaitu di src/pages/posts/Index.js, kemudian tambahkan kode / method berikut ini tepat di bawah method fetchData.
//function "deletePost"
const deletePost = async (id) => {
//sending
await axios.delete(`http://localhost:3000/api/posts/delete/${id}`);
//panggil function "fetchData"
fectData();
}
Di atas, kita membuat method baru dengan nama deletePost dengan parameter id yang dikirimkan ketika button DELETE di klik. Dimana di dalamnya kita melakukan HTTP request menggunakan Axios dengan method DELETE ke dalam endpoint http://localhost:3000/api/posts/delete/:id.
//sending
await axios.delete(`http://localhost:3000/api/posts/delete/${id}`);
Jika proses delete data berhasil, maka kita akan memanggil method fetchData, dengan tujuan agar melakukan fetching ulang ke dalam Rest API untuk mendapatkan data yang telah diperbarui.
//panggil function "fetchData"
fectData();
Langkah 3 - Uji Coba Proses Delete Data
Sekarang, silahkan reload halaman post index, maka kita akan mendapatkan hasil kurang lebih seperti berikut ini :
Sekarang, silahkan DELETE salah satu data yang ada, jika berhasil maka data akan berkurang. Kurang lebih seperti berikut ini :
Sampai disini pembahasan bagaimana cara membuat proses delete data di dalam React.js. Jika teman-teman mengalami kesulitan aatau problem saat mencobanya, silahkan bisa bertanya melalui kolom komentar atau group diskusi di Telegram SantriKoding.
SOURCE CODE :
Terima Kasih