קריאה לפונקציות ב-JSX

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

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

function shout(text) {
    return text.toUpperCase() + '!';
}

export default function App() {
    return <h1>{shout('hello')}</h1>;
    // מציג: HELLO!
}

כך הרכיבים נשארים קריאים: תגי הסימון מציינים מה מופיע, והפונקציות המסייעות מציינות איך הוא מחושב. גם שיטות של מחרוזות פועלות ישירות:

<p>{name.toUpperCase()}</p>

אתגר

קל

פונקציית העזר fullName בונה שם תצוגה משני חלקים, אבל אף אחד לא קורא לה.

גרום לפסקה עם id="author" להציג את התוצאה של הקריאה ל-fullName('Grace', 'Hopper'): היא אמורה להציג Grace Hopper.

נסו בעצמכם

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