Halo teman-teman semuanya, pada tutorial sebelumnya, kita telah belajar bagaimana cara mengedit dan memperbarui data menggunakan React, TypeScript, dan REST API. Kali ini, kita akan melanjutkan belajar dengan membuat fitur untuk menghapus data dari database menggunakan API yang telah disediakan oleh backend Laravel.
Langkah 1 - Membuat Proses Delete Data
Disini kita akan menambahkan sebuah function baru di dalam halaman products index, dimana function tersebut nantinya akan dipanggil jika button delete diklik.
Langsung saja, silahkan teman-teman buka file src/views/products/index.tsx, kemudian ubah semua kode-nya menjadi seperti berikut ini.
src/views/products/index.tsx
//import Type FC dan hook useState dan useEffect dari React
import { FC, useState, useEffect } from "react";
//import api dari folder api
import Api from "../../api";
//import Link dari react-router
import { Link } from "react-router";
// Interface Product
interface Product {
id: number;
image: string;
title: string;
description: string;
price: number;
stock: number;
}
const ProductIndex: FC = () => {
// init state products
const [products, setProducts] = useState<Product[]>([]);
// Fetch data products dari API
const fetchDataProducts = async () => {
try {
// Fetch data products
const response = await Api.get("/api/products");
// Set data products ke state
setProducts(response.data.data.data);
} catch (error) {
// Log error
console.error("Error fetching products:", error);
}
};
// useEffect
useEffect(() => {
// call fetchDataProducts
fetchDataProducts();
}, []);
// function untuk handle delete product
const deleteProduct = async (id: number) => {
try {
// Kirim data ke API
await Api.delete(`/api/products/${id}`);
// call fetchDataProducts
fetchDataProducts();
} catch (error) {
// Log error
console.error("Error deleting product:", error);
}
}
return (
<div className="container mt-5 mb-5">
<div className="row">
<div className="col-md-12">
<Link
to="/products/create"
className="btn btn-md btn-success rounded-5 shadow border-0 mb-3"
>
ADD NEW PRODUCT
</Link>
<div className="card border-0 rounded-3 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">Description</th>
<th scope="col">Price</th>
<th scope="col">Stock</th>
<th scope="col" style={{ width: "15%" }}>Actions</th>
</tr>
</thead>
<tbody>
{products.length > 0 ? (
products.map((product) => (
<tr key={product.id}>
<td className="text-center">
<img
src={product.image}
alt={product.title}
width="200"
className="rounded-3"
/>
</td>
<td>{product.title}</td>
<td>{product.description}</td>
<td>{product.price?.toLocaleString("id-ID")}</td>
<td>{product.stock}</td>
<td className="text-center">
<Link
to={`/products/edit/${product.id}`}
className="btn btn-sm btn-primary rounded-5 shadow border-0 me-2"
>
EDIT
</Link>
<button onClick={() => deleteProduct(product.id)} className="btn btn-sm btn-danger rounded-5 shadow border-0">
DELETE
</button>
</td>
</tr>
))
) : (
<tr>
<td colSpan={6} className="text-center">
<div className="alert alert-danger mb-0">
No data available
</div>
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
);
};
export default ProductIndex;
Dari perubahan kode di atas, pertama kita membuat function baru dengan nama deleteProduct.
Function ini akan dijalankan saat button delete diklik, karena di dalam button kita tambahkan event onClick yang mengarah ke dalam function tersebut.
<button onClick={() => deleteProduct(product.id)} className="btn btn-sm btn-danger rounded-5 shadow border-0">
DELETE
</button>
// function untuk handle delete product
const deleteProduct = async (id: number) => {
//...
}
Di dalam function di atas, kita melakukan delete data menggunakan Axios dengan method DELETE.
// Kirim data ke API
await Api.delete(`/api/products/${id}`);
Jika proses delete data berhasil dilakukan, maka kita panggil function fetchDataProducts. Tujuannya agar data yang ditampilkan diperbarui.
// call fetchDataProducts
fetchDataProducts();
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 TypeScript 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