Chamando Funções no JSX

Parte da seção Fundamentos do Journey de React da Coddy — lição 9 de 42.

Como as chaves aceitam qualquer expressão, elas também aceitam chamadas de função. Defina uma função auxiliar acima do componente e chame-a diretamente na marcação:

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

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

Isso mantém os componentes legíveis: a marcação diz o que aparece, os auxiliares dizem como é calculado. Métodos de string também funcionam diretamente:

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

Desafio

Fácil

O helper fullName constrói um nome de exibição a partir de duas partes, mas ninguém o chama.

Faça o parágrafo com id="author" renderizar o resultado de chamar fullName('Grace', 'Hopper'): ele deve mostrar Grace Hopper.

Experimente você mesmo

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