Render sebuah list

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

Data biasanya hadir dalam array, dan map mengubah array menjadi list elemen:

const fruits = ['Apple', 'Banana', 'Cherry'];

<ul>
    {fruits.map((fruit) => <li key={fruit}>{fruit}</li>)}
</ul>

map memanggil fungsi panahmu satu kali untuk setiap item dan mengumpulkan elemen <li> yang dikembalikan. React merender seluruh array. Tambahkan buah ke data, lalu list akan bertambah dengan sendirinya. Markup tidak pernah berubah.

Atribut key={fruit} memberikan identitas yang stabil pada setiap item. Kamu akan mempelajarinya lebih lanjut di pelajaran berikutnya. Untuk saat ini, selalu sertakan key yang unik pada elemen yang kamu kembalikan dari map.

Tantangan

Mudah

Render menu dari data.

Di dalam <ul id="fruit-list">, gunakan map untuk merender satu <li> untuk setiap buah dalam array.
Setiap <li> menampilkan nama buah dan menggunakannya sebagai key.

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>