Menghapus Element Berdasarkan Index dalam React State

Untuk menghapus elemen berdasarkan indeks dalam state di React bisa dilihat pada contoh script berikut:

import React, { useState } from 'react';

function ExampleComponent() {
  const [items, setItems] = useState(['item1', 'item2', 'item3', 'item4']);

  const handleDelete = (index) => {
    const updatedItems = [...items];
    updatedItems.splice(index, 1);
    setItems(updatedItems);
  };

  return (
    <div>
      <h1>List of Items</h1>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={() => handleDelete(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ExampleComponent;

Penjelasan:

1. Di dalam komponen utama, kita menggunakan useState untuk membuat state items yang berisi array elemen yang ingin kita hapus.
2. Fungsi handleDelete akan dipanggil ketika tombol “Delete” pada elemen tertentu ditekan. Fungsi ini akan menghapus elemen dengan menggunakan splice untuk memodifikasi array items.
3. Komponen akan merender daftar elemen menggunakan map, dengan setiap elemen menampilkan teksnya dan sebuah tombol “Delete” yang mengarah ke fungsi handleDelete dengan indeks elemen sebagai argumen.
4. Setelah elemen dihapus, setItems akan dipanggil untuk memperbarui state items dengan array yang telah diperbarui.
5. Saat komponen dirender, daftar elemen akan ditampilkan bersama dengan tombol “Delete” yang terkait dengan setiap elemen. Ketika tombol “Delete” ditekan, elemen tersebut akan dihapus dari state dan komponen akan dirender ulang dengan elemen yang tersisa.

Pastikan untuk mengganti “ExampleComponent” dengan nama komponen React yang sesuai di proyek Anda.