Memanggil Fungsi di JSX

Termasuk bagian Dasar-Dasar dalam perjalanan React di Coddy. Pelajaran 9 dari 42.

Karena kurung kurawal dapat menerima ekspresi apa pun, kurung kurawal juga dapat menerima pemanggilan fungsi. Definisikan fungsi pembantu di atas komponen, lalu panggil fungsi itu langsung di markup:

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

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

Ini membuat komponen mudah dibaca: markup menjelaskan apa yang ditampilkan, helper menjelaskan bagaimana cara menghitungnya. Method string juga bisa digunakan langsung:

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

Tantangan

Mudah

Fungsi pembantu fullName menyusun nama tampilan dari dua bagian, tetapi tidak ada yang memanggilnya.

Buat paragraf dengan id="author" menampilkan hasil pemanggilan fullName('Grace', 'Hopper'): hasilnya harus menampilkan Grace Hopper.

Coba sendiri

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