Liste Ekrana Basma

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

Veriler genellikle diziler halinde gelir ve map bir diziyi bir eleman listesine dönüştürür:

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

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

map, ok fonksiyonunuzu her bir öğe için bir kez çağırır ve döndürülen <li> elemanlarını toplar. React tüm diziyi render eder. Veriye bir fruit ekleyin, list kendiliğinden büyür; işaretleme dili asla değişmez.

key={fruit} özniteliği her öğeye kararlı bir kimlik kazandırır. Bununla ilgili daha fazla bilgi sonraki derste; şimdilik, map ile döndürdüğünüz öğeye her zaman benzersiz bir key ekleyin.

Görev

Kolay

Menüyü veriden render edin.

<ul id="fruit-list"> içinde, dizideki her bir meyve için bir <li> render etmek üzere map kullanın.
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>