Tutorial React dan Laravel 10 #6: Delete Data di React Menggunakan Rest API


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com
Tutorial React dan Laravel 10 #6: Delete Data di React Menggunakan Rest API

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



Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami


ARTIKEL TERKAIT