Llamada a funciones en JSX

Parte de la sección Fundamentos del Journey de React de Coddy — lección 9 de 42.

Dado que las llaves aceptan cualquier expresión, también aceptan llamadas a funciones. Define una función auxiliar arriba del componente y llámala directamente en el marcado:

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

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

Esto mantiene los componentes legibles: el marcado dice qué aparece, los auxiliares dicen cómo se calcula. Los métodos de string también funcionan directamente:

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

Desafío

Fácil

La función auxiliar fullName construye un nombre para mostrar a partir de dos partes, pero nadie la llama.

Haz que el párrafo con id="author" renderice el resultado de llamar a fullName('Grace', 'Hopper'): debe mostrar Grace Hopper.

Pruébalo tú mismo

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