רינדור של רשימה

חלק מהיחידה יסודות במסלול ה-React של Coddy. שיעור 35 מתוך 42.

נתונים מגיעים בדרך כלל במערכים, ו־map הופכת מערך לרשימה של רכיבים:

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

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

map קוראת לפונקציית החץ שלך פעם אחת לכל פריט ואוספת את רכיבי <li> שהוחזרו. React מרנדרת את המערך כולו. הוסיפו פרי לנתונים, והרשימה גדלה מעצמה; הסימון לעולם אינו משתנה.

המאפיין key={fruit} מעניק לכל פריט זהות יציבה. נרחיב על כך בשיעור הבא; לעת עתה, יש לכלול תמיד key ייחודי ברכיב שמחזירים מ־map.

אתגר

קל

הצג את התפריט מנתונים.

בתוך <ul id="fruit-list">, השתמש ב־map כדי להציג פריט <li> אחד לכל פרי במערך.
כל <li> מציג את שם הפרי ומשתמש בו בתור key.

נסו בעצמכם

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