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

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

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

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

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

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

המאפיין 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>