Sự khác nhau giữa biểu thức và câu lệnh trong JSX là gì?

Biểu thức (expression) là đoạn code trả về một giá trị, còn câu lệnh (statement) là đoạn code thực thi một hành động nhưng không trả về giá trị. Trong cặp dấu {} của JSX, bạn chỉ có thể đặt biểu thức, không thể đặt câu lệnh.

JSX được Babel transpile thành lời gọi React.createElement(type, props, ...children). Các đối số của hàm phải là giá trị, nên bất kỳ thứ gì bạn viết trong {} cũng phải evaluate ra một giá trị. Câu lệnh như if, for, while không trả về giá trị, vì vậy đặt chúng vào đó sẽ gây lỗi cú pháp.

Thay vì if/else, dùng toán tử ba ngôi hoặc logical AND:

{isLoggedIn ? <UserMenu /> : <LoginButton />}
{unreadCount > 0 && <Badge count={unreadCount} />}

Thay vì vòng lặp for, dùng map():

{items.map(item => <li key={item.id}>{item.name}</li>)}

Lỗi thường gặp là viết { if (x) ... } hoặc { for (...) ... } trong JSX — trình biên dịch sẽ báo lỗi ngay. Nếu logic quá phức tạp, hãy tính toán trước ở phía trên lệnh return và nhúng biến kết quả vào JSX.

Lưu ý: Một số cú pháp trông giống câu lệnh nhưng thực chất là biểu thức, ví dụ arrow function () => {} hoặc ternary cond ? a : b. Hãy dựa vào việc "có trả về giá trị hay không" để quyết định.