React State Array: Cara Nambah, Hapus, & Edit Data yang Benar

Halo, Teman Ngoding! 👋

Siapa di sini yang pernah ngalamin kejadian horor kayak gini: Kamu punya state list (array), terus kamu coba tambahin item baru pakai .push(). Eh, tapi kok di layar nggak muncul apa-apa? Padahal kalau di console.log datanya udah masuk.

React-nya rusak? Enggak dong. Yang salah itu cara kita memperlakukan State.

Di React, ada satu aturan emas: JANGAN PERNAH mengubah (mutate) state secara langsung.

Hari ini kita bakal bahas tuntas gimana cara manipulasi array di state React dengan cara yang “halal” dan disukai React. Siapin kopi, yuk mulai! ☕

Kenapa push() dan splice() itu Terlarang?

Coba lihat kode “nakal” ini:

const [todos, setTodos] = useState(["Belajar React", "Ngopi"]);

const tambahTodo = () => {
  // ❌ SALAH BESAR!
  todos.push("Tidur siang");
  setTodos(todos);
};

Kenapa ini nggak jalan? Karena .push() itu mengubah array di tempat (mutating). Referensi memori array-nya nggak berubah. React itu pintar tapi malas. Dia ngecek: “Apakah referensi array yang baru beda sama yang lama?” Kalau referensinya sama, React bakal bilang: “Ah, datanya sama aja. Gak usah render ulang.”

Makanya, kita harus selalu bikin array baru setiap kali mau update state.

1. Menambah Data (Add)

Gunakan Spread Operator (...). Ini cara paling gampang buat nyalin array lama ke array baru.

const tambahTodo = (todoBaru) => {
  // ✅ BENAR!
  // Kita bikin array baru: [...dataLama, dataBaru]
  setTodos([...todos, todoBaru]);
};

Kalau mau nambah di depan (unshift)? Tinggal balik aja: setTodos([todoBaru, ...todos]);

2. Menghapus Data (Delete)

Jangan pakai .splice()! Itu ribet dan mutating. Gunakanlah method .filter().

Konsepnya: “Ambil semua item KECUALI yang mau kita hapus.”

const hapusTodo = (indexYangDihapus) => {
  // ✅ BENAR!
  setTodos(todos.filter((_, index) => index !== indexYangDihapus));
};

// Atau kalau pakai ID (lebih disarankan)
const hapusById = (id) => {
  setTodos(todos.filter((todo) => todo.id !== id));
};

3. Mengubah Data (Update/Edit)

Gimana kalau kita mau ganti status “Belum Selesai” jadi “Selesai”? Jangan akses index langsung kayak todos[0].status = "Selesai". Itu mutating!

Gunakan method .map(). Konsepnya: “Looping semua item. Kalau ketemu item yang dicari, ganti isinya. Kalau bukan, biarin aja.”

const toggleStatus = (id) => {
  // ✅ BENAR!
  setTodos(
    todos.map((todo) => {
      if (todo.id === id) {
        // Copy object lama, lalu timpa property 'completed'
        return { ...todo, completed: !todo.completed };
      }
      // Item lain biarin aja
      return todo;
    })
  );
};

Ringkasan Jurus

Penutup

Manipulasi array secara immutable (nggak ngubah aslinya) mungkin terasa aneh di awal, apalagi kalau kamu terbiasa coding algoritmik biasa. Tapi percayalah, ini kunci biar aplikasi React kamu bebas bug dan performanya ngebut.

Intinya: Selalu bikin copy baru, jangan otak-atik yang lama.

Semoga tercerahkan! Kalau masih bingung, sini ngopi dulu. ☕

Happy Coding! 🚀