Ulasan: Kondisi & List

Termasuk bagian Dasar-Dasar dalam perjalanan React di Coddy. Pelajaran 38 dari 42.

Tantangan

Sedang

Rekap bab: buat papan tugas dari data, dengan menggunakan semua yang dipelajari di bab ini.

Komponen mendefinisikan array tasks. Di dalam <ul id="done-list">, tampilkan satu <li> untuk setiap tugas yang selesai: gunakan filter terlebih dahulu, lalu map.
Setiap <li> menampilkan text tugas dan menggunakan id-nya sebagai key.
Di atas list, gunakan && untuk menampilkan <span> dengan id="badge" yang bertuliskan 2 done (buat angkanya dari length array hasil filter!), tetapi hanya jika setidaknya ada satu tugas yang selesai.

Coba sendiri

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>