Appel de fonctions dans JSX

Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 9 sur 42.

Puisque les accolades acceptent n'importe quelle expression, elles acceptent également les appels de fonction. Définissez un helper au-dessus du composant et appelez-le directement dans le balisage :

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

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

Cela maintient les composants lisibles : le balisage indique ce qui apparaît, les helpers indiquent comment c'est calculé. Les méthodes de chaîne fonctionnent directement aussi :

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

Défi

Facile

Le helper fullName construit un nom d'affichage à partir de deux parties, mais personne ne l'appelle.

Faites en sorte que le paragraphe avec l'id="author" affiche le résultat de l'appel de fullName('Grace', 'Hopper') : il doit afficher Grace Hopper.

Essayez vous-même

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