Tugas Akhir
Penjelasan
Sekarang saatnya menggabungkan semua yang sudah dipelajari — dari JSX sampai memoization — jadi satu aplikasi utuh. Kamu akan membuat aplikasi Todo List sederhana yang menggabungkan useState, forms (controlled component), rendering list dengan key, dan conditional rendering.
Tugas
Buat komponen TodoApp dengan state daftarTodo (array objek {id, teks, selesai}) dan inputBaru (string, controlled component). Buat form untuk menambah todo baru ke daftarTodo (id bisa pakai Date.now() atau counter manual). Tampilkan daftarTodo lewat map() dengan key unik, tiap item punya checkbox untuk toggle selesai dan tombol hapus. Tampilkan juga ringkasan "X dari Y todo selesai" di bagian atas.
Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.
Tips
Kalau bingung mulai dari mana, kerjakan tambahTodo() dan render list-nya dulu (tanpa checkbox/hapus), cek hasilnya di browser, baru tambahkan toggleSelesai() dan hapusTodo() satu per satu. Program besar selalu lebih mudah kalau dipecah jadi langkah-langkah kecil.