רינדור עם אופרטור תנאי

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

סוגריים מסולסלים ב-JSX לא יכולים להכיל משפט if, אבל הם מתאימים בדיוק לאופרטור תנאי, והוא מכסה כמעט כל מצב של או/או במסך:

{isLoggedIn ? 'Welcome back!' : 'Please log in'}

קודם התנאי, אחר כך הערך עבור true, ואז הערך עבור false. שני הצדדים יכולים להיות רכיבי JSX מלאים:

{isLoggedIn
    ? <p>Welcome back!</p>
    : <button>Log in</button>}

שלבו זאת עם state והדף יתחלף בזמן אמת: שנו את הערך הבוליאני, ו-React ירנדר מחדש את הענף האחר.

אתגר

קל

בנו שורת סטטוס התחברות.

הוסיפו מצב בוליאני loggedIn, שמתחיל ב-false.
הכפתור (id="login") הופך את ערכו בכל לחיצה.
הפסקה (id="status") מציגה Welcome back! כשמחוברים ו-Please log in אחרת, באמצעות אופרטור מותנה.

נסו בעצמכם

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