Calling Functions in JSX

Part of the Fundamentals section of Coddy's React journey — lesson 9 of 42.

Since braces take any expression, they also take function calls. Define a helper above the component and call it right in the markup:

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

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

This keeps components readable: the markup says what appears, the helpers say how it's computed. String methods work directly too:

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

Challenge

Easy

The fullName helper builds a display name from two parts, but nobody calls it.

Make the paragraph with id="author" render the result of calling fullName('Grace', 'Hopper'): it should show Grace Hopper.

Try it yourself

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