6.6 רשימות ומפתחות תרגול
תרגול - רשימות ומפתחות¶
תרגיל 1 - רשימת סטודנטים¶
צרו קומפוננטה StudentList שמציגה רשימת סטודנטים. כל סטודנט הוא אובייקט עם:
id(מספר)name(מחרוזת)grade(מספר, 0-100)
הציגו את הסטודנטים בטבלת HTML עם עמודות: שם, ציון, וסטטוס (עובר/נכשל - לפי ציון 56). השתמשו ב-key מתאים.
תרגיל 2 - סינון ומיון¶
הרחיבו את StudentList מהתרגיל הקודם:
- הוסיפו כפתור "הצג רק עוברים" שמסנן סטודנטים עם ציון מתחת ל-56
- הוסיפו כפתורי מיון: "מיין לפי שם" (א-ב), "מיין לפי ציון" (גבוה לנמוך)
- הציגו את מספר הסטודנטים המוצגים מתוך הכלל (למשל "מציג 5 מתוך 8")
- השתמשו בסטייט לניהול מצב הסינון והמיון
תרגיל 3 - רשימה דינמית עם הוספה ומחיקה¶
צרו קומפוננטה BookList שמנהלת רשימת ספרים. כל ספר הוא אובייקט עם:
id(מספר - השתמשו במונה שעולה)title(מחרוזת)author(מחרוזת)year(מספר)
הקומפוננטה צריכה:
- טופס להוספת ספר חדש (שלושה שדות)
- הצגת כל הספרים בכרטיסים
- כפתור מחיקה לכל ספר
- כפתור "מיין לפי שנה" שממיין מהישן לחדש
תרגיל 4 - נתונים מקוננים¶
צרו קומפוננטה CourseList שמציגה רשימת קורסים. כל קורס הוא אובייקט עם:
id(מספר)name(מחרוזת)instructor(מחרוזת)students- מערך של אובייקטים עםidו-name
הציגו כל קורס ככרטיס, ובתוכו את רשימת הסטודנטים. הציגו את מספר הסטודנטים ליד שם הקורס.
תרגיל 5 - חיפוש ברשימה¶
צרו קומפוננטה CountrySearch עם:
- מערך של מדינות (כל אחת עם
code,name,continent,population) - שדה חיפוש שמסנן את הרשימה בזמן אמת (לפי שם המדינה)
- דרופדאון לסינון לפי יבשת
- הצגת תוצאות בכרטיסים עם כל הפרטים
- הודעה "לא נמצאו תוצאות" כשאין התאמות
- מספר התוצאות מעל הרשימה
שאלות¶
- למה
Math.random()הוא key גרוע? מה יקרה בפועל אם נשתמש בו? - מה ההבדל בין
key={user.id}ל-key={index}כשמוחקים את האיבר הראשון ברשימה? - למה ה-key צריך להיות על האלמנט שמוחזר מ-map, ולא על אלמנט פנימי?
- מה קורה כשלשני פריטים ברשימה יש אותו key?