Halo teman-teman semuanya, pada artikel sebelumnya kita telah belajar bagaimana cara membuat proses edit dan juga update data di dalam React menggunakan Rest API. Sekarang kita semua akan belajar bagaimana cara membuat proses delete data di dalam React menggunakan Rest API.
Langkah 1 - Membuat Proses Delete Data
Disini kita akan menambahkan sebuah method baru di dalam halaman post index, dimana method tersebut nantinya akan dipanggil jika button delete diklik.
Langsung saja, silahkan teman-teman buka file src/views/posts/index.jsx, kemudian ubah semua kode-nya menjadi seperti berikut ini.
//import useState dan useEffect
import { useState, useEffect } from 'react';
//import api
import api from '../../api';
//import Link
import { Link } from 'react-router-dom';
export default function PostIndex() {
//ini state
const [posts, setPosts] = useState([]);
//define method
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 (
<div className="container mt-5 mb-5">
<div className="row">
<div className="col-md-12">
<Link to="/posts/create" className="btn btn-md btn-success rounded shadow border-0 mb-3">ADD NEW POST</Link>
<div className="card border-0 rounded shadow">
<div className="card-body">
<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">
<Link to={`/posts/edit/${post.id}`} className="btn btn-sm btn-primary rounded-sm shadow border-0 me-2">EDIT</Link>
<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>
</div>
</div>
</div>
</div>
</div>
)
}
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.
SOURCE CODE :
Terima Kasih