Materi terakhir yang akan kita pelajari adalah bagaimana implementasi menghapus data melalui API pada React. Oke langsung saja kita lakukan perubahan pada file src/components/TodoItem.js seperti berikut.
src/components/TodoItem.js
const TodoItem = ({ todo, setRefresh }) => {
const updateTodo = () => {
todo.done = !todo.done
fetch("http://localhost:8000/todos/" + todo.id, {
method: "PUT",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(todo)
}).then(() => {
console.log('todo updated.')
setRefresh(true)
})
}
const deleteTodo = () => {
fetch("http://localhost:8000/todos/" + todo.id, {
method: "DELETE",
}).then(() => {
console.log('todo deleted.')
setRefresh(true);
});
};
return (
<li className={`${todo.done ? "checked" : ""}`}>
<div onClick={updateTodo}>{todo.title}</div>
<span className="close" onClick={deleteTodo}>x</span>
</li>
);
};
export default TodoItem;
Pada kode di atas kita membuat function baru dengan nama deleteTodo dimana function tersebut bertugas memanggil API untuk menghapus data dan ketika proses sukses kita perlu memanggil function setRefresh agar data pada todo list di refresh kembali seperti pada proses menambah dan mengubah data.
const deleteTodo = () => {
fetch("http://localhost:8000/todos/" + todo.id, {
method: "DELETE",
}).then(() => {
console.log('todo deleted.')
setRefresh(true);
});
};
Dan pada bagian template HTML, kita menambahkan event onClick pada tombol close/delete yang akan memanggil function deleteTodo ketika tombol close/delete di klik.
<span className="close" onClick={deleteTodo}>x</span>
Sekarang kamu bisa mencoba untuk menghapus salah satu data todo dan seharusnya data yang dihapus akan terhapus atau hilang dari todo list.
Source Code:
Penulis meminta maaf jika masih ada banyak kekurangan pada tutorial ini dan penulis menerima saran atau koreksi jika terdapat kesalahan pada pembahasan materi pada tutorial ini. Semoga Tutorial set "CRUD dengan React - Membuat Simple Todo App" ini bermanfaat dan terima kasih bagi teman-teman yang sudah membaca tutorial ini.