How would you render a user's name dynamically inside an <h2> tag in JSX?

Đáp án đúng: "

<h2> {
  userName
}
</h2>

". Trong JSX, cặp ngoặc nhọn mở một chỗ chứa biểu thức JavaScript: biểu thức bên trong được tính lúc render và giá trị của nó được chèn vào làm nội dung văn bản của thẻ, nên đặt biến userName trong ngoặc nhọn ngay giữa thẻ h2 sẽ hiện ra tên người dùng hiện tại và tự đổi theo khi biến mang giá trị mới. Phương án "

<h2> <p>{
  userName
}
</p> </h2>

" cũng hiện được tên nhưng lồng thêm một thẻ p không cần thiết vào tiêu đề, mà p là phần tử khối, đặt trong h2 là HTML không hợp lệ vì h2 chỉ nhận nội dung dạng chữ. Phương án "<h2> "userName" </h2> " thiếu ngoặc nhọn nên JSX coi đó là chữ thường và in nguyên văn cả tên biến lẫn dấu nháy chứ không đọc giá trị biến. Phương án "

<h2>{
  userName: "John"
}
</h2>

" sai vì cặp ngoặc nhọn ngoài cùng là chỗ chứa biểu thức, mà userName: "John" không phải một biểu thức JavaScript hợp lệ nên trình biên dịch báo lỗi cú pháp, và dù có chạy thì nó cũng gán cứng một tên chứ không hiển thị biến động.