סינון ואז מיפוי
חלק מהיחידה יסודות במסלול ה-React של Coddy. שיעור 37 מתוך 42.
אפשר לשרשר שיטות של מערכים, ו-filter לפני map מציג רק את הפריטים הרצויים:
const numbers = [1, 2, 3, 4, 5, 6];
{numbers
.filter((n) => n % 2 === 0)
.map((n) => <li key={n}>{n}</li>)}
// מציג: 2, 4, 6filter משאיר את הפריטים שעבורם התנאי מתקיים; map הופך את הפריטים שנותרו לאלמנטים. תוצאות חיפוש, הודעות שלא נקראו, משימות שהושלמו. כל תכונה באינטרנט של „הצג רק…” היא השרשרת הזו.
אתגר
בינוניהצג רק את הפריטים הזולים בחנות.
- בתוך
<ul id="cheap-list">, הצג פריט<li>אחד לכל מחיר במערך שהוא מתחת ל־10: סנן תחילה, ואז מפה. - כל
<li>מציג את המחיר ומשתמש בו כמפתח.
נסו בעצמכם
<!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>השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה יסודות
7תנאים ורשימות
רינדור עם אופרטור תנאיהצגה באמצעות &&רינדור של רשימהלמפתחות יש חשיבותסינון ואז מיפויסיכום: תנאים ורשימות2ביטויי JSX
סוגריים מסולסליםחשבון בסוגריים מסולסליםסוגריים מסולסלים במאפייניםקריאה לפונקציות ב-JSXסיכום: ביטויי JSX5מצב ואירועים
מהו מצב?מונה לחיצותסופרים בקפיצותשינוי מצב באמצעות Stateמצבים בלתי תלוייםסיכום: מצב ואירועים8פרויקט: כרטיס פרופיל
שלב 1: מבנה הכרטיסשלב 2: כרטיס עם Propsשלב 3: כפתור לייקשלב 4: הפעלה וכיבוי של מעקב