Gọi hàm trong JSX

Thuộc phần Kiến thức cơ bản trong hành trình React của Coddy. Bài học 9 trên 42.

Vì dấu ngoặc nhọn có thể chứa mọi biểu thức nên chúng cũng có thể chứa lời gọi hàm. Hãy định nghĩa một hàm trợ giúp phía trên component rồi gọi hàm ngay trong markup:

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

export default function App() {
    return <h1>{shout('hello')}</h1>;
    // hiển thị: HELLO!
}

Cách này giúp các thành phần dễ đọc hơn: phần đánh dấu cho biết nội dung nào sẽ xuất hiện, còn các hàm hỗ trợ cho biết nội dung đó được tính toán như thế nào. Bạn cũng có thể dùng trực tiếp các phương thức của chuỗi:

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

Thử thách

Dễ

Hàm trợ giúp fullName tạo tên hiển thị từ hai phần, nhưng chưa có chỗ nào gọi hàm này.

Để đoạn văn có id="author" hiển thị kết quả của lời gọi fullName('Grace', 'Hopper'): nội dung cần hiển thị là Grace Hopper.

Tự làm thử

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