Renderowanie listy

Część sekcji Podstawy ścieżki React w Coddy. Lekcja 35 z 42.

Dane zwykle występują w tablicach, a map przekształca tablicę w listę elementów:

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

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

map wywołuje funkcję strzałkową raz dla każdego elementu i zbiera zwrócone elementy <li>. React renderuje całą tablicę. Dodaj owoc do danych, a lista sama się powiększy; znaczniki nigdy się nie zmieniają.

Atrybut key={fruit} nadaje każdemu elementowi stabilną tożsamość. Więcej na ten temat w następnej lekcji; na razie zawsze umieszczaj unikalny key w elemencie zwracanym przez map.

Wyzwanie

Łatwy

Wyrenderuj menu z danych.

Wewnątrz <ul id="fruit-list"> użyj map, aby wyrenderować jeden element <li> dla każdego owocu w tablicy.
Każdy element <li> wyświetla nazwę owocu i używa jej jako key.

Spróbuj swoich sił

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