הצגה באמצעות &&

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

לעיתים קרובות אין צורך ב־else: פשוט רוצים שמשהו יופיע כאשר תנאי מתקיים. הטריק של && מאפשר להציג משהו או לא להציג דבר:

{unread > 0 && <span>You have {unread} new messages</span>}

כך זה עובד: && מחזיר את הצד הימני כשהצד השמאלי הוא אמת, ו-React מציג אותו. כשהצד השמאלי הוא שקר, לא מוצג דבר. כשיש ערך בוליאני בצד שמאל, זהו הביטוי הטרנרי בלי : null:

{cond ? <X /> : null}   // שקול ל־
{cond && <X />}

לכן הדוגמה בודקת את unread > 0. עם {unread && <span>...</span>} וכאשר unread שווה ל-0, && מחזיר את 0, ו-React מציג אותו בדף.

אתגר

קל

הצג תג בתיבת הדואר הנכנס רק כשיש משהו לקרוא. הרכיב מגדיר את unread.

בעזרת &&, הצג <span> עם id="badge" והטקסט 3 new messages (בנה את המספר מהמשתנה!), אבל רק כאשר unread גדול מ־0.

נסו בעצמכם

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