Chiamare funzioni in JSX

Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 9 di 42.

Poiché le parentesi graffe accettano qualsiasi espressione, accettano anche le chiamate di funzione. Definisci una funzione di supporto sopra il componente e chiamala direttamente nel markup:

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

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

Questo mantiene i componenti leggibili: il markup dice che cosa appare, gli helper dicono come viene calcolato. Anche i metodi delle stringhe funzionano direttamente:

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

Sfida

Facile

L’helper fullName crea un nome visualizzato a partire da due parti, ma nessuno lo richiama.

Fai in modo che il paragrafo con id="author" visualizzi il risultato della chiamata a fullName('Grace', 'Hopper'): dovrebbe mostrare Grace Hopper.

Provalo tu

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