סוגריים מסולסלים במאפיינים

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

סוגריים מסולסלים עובדים גם במאפיינים. החליפו את המרכאות בסוגריים מסולסלים, וערך המאפיין יגיע מ-JavaScript:

const level = 'warning';

return <p className={level}>Check this!</p>;

כעת המחלקה של הפסקה היא הערך שמכיל המשתנה: שנה את level ל-'error' והמחלקה תשתנה בהתאם. כך אפליקציות React מחליפות סגנונות בהתאם לנתונים.

שימו לב היטב לתחביר: className={level}, בלי מרכאות סביב הסוגריים המסולסלים. className="{level}" (עם מרכאות) יגדיר את המחלקה לטקסט המילולי {level}.

אתגר

קל

פסקת ההתראה צריכה לקבל את מחלקת ה-CSS שלה מהמשתנה level.

הגדר את className של הפסקה לערך של level באמצעות סוגריים מסולסלים (המחלקה שלה צריכה להיות בסופו של דבר warning).
אל תקליד את המילה warning במאפיין. השתמש במשתנה.

נסו בעצמכם

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