Liste Ekrana Basma

Coddy'nin React Journey'sinin Temeller bölümünün bir parçası. Ders 35 / 42.

Veriler genellikle diziler hâlinde gelir ve map bir diziyi öğeler listesine dönüştürür:

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

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

map, ok işlevinizi her öğe için bir kez çağırır ve döndürülen <li> öğelerini toplar. React tüm diziyi işler. Verilere bir meyve ekleyin, liste kendiliğinden büyür; işaretleme hiç değişmez.

key={fruit} özniteliği her öğeye kararlı bir kimlik kazandırır. Bu konuyu sonraki derste daha ayrıntılı ele alacağız; şimdilik, map işlevinden döndürdüğün öğeye her zaman benzersiz bir key ekle.

Görev

Kolay

Menüyü verilerden oluştur.

<ul id="fruit-list"> içinde, dizideki her meyve için bir <li> oluşturmak üzere map kullan.
Her <li> meyvenin adını gösterir ve bunu key olarak kullanır.

Kendin dene

<!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>