Wywoływanie funkcji w JSX

Część sekcji Podstawy ścieżki React w Coddy. Lekcja 9 z 42.

Ponieważ nawiasy klamrowe mogą zawierać dowolne wyrażenie, mogą też zawierać wywołania funkcji. Zdefiniuj funkcję pomocniczą nad komponentem i wywołaj ją bezpośrednio w znaczniku:

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

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

Dzięki temu komponenty pozostają czytelne: znacznik mówi, co się pojawia, a funkcje pomocnicze mówią, jak jest to obliczane. Metody ciągów znaków również działają bezpośrednio:

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

Wyzwanie

Łatwy

Funkcja pomocnicza fullName tworzy nazwę wyświetlaną z dwóch części, ale nikt jej nie wywołuje.

Spraw, aby akapit z id="author" wyświetlał wynik wywołania fullName('Grace', 'Hopper'): powinien wyświetlać Grace Hopper.

Spróbuj swoich sił

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