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

Trong dấu ngoặc nhọn {} của JSX, bạn chỉ có thể đặt biểu thức (expressions) — tức là đoạn code có thể trả về một giá trị.

Bạn không thể dùng câu lệnh (statements) như if, for, while bên trong JSX. Nguyên nhân là do JSX sẽ được transpile thành một lời gọi hàm trả về object, bạn không thể nhúng câu lệnh if vào giữa các đối số của một hàm.

Cách xử lý trong JSX:
- Thay vì if/else: Dùng toán tử ba ngôi (? :) hoặc logical AND (&&).
- Thay vì vòng lặp for: Dùng hàm Array.prototype.map().

Ví dụ hợp lệ (Expression):

jsx

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

Ví dụ KHÔNG hợp lệ (Statement):

jsx

{ for (let i of items) { ... } } // ❌ Báo lỗi cú pháp

(Mẹo: Nếu logic quá phức tạp, hãy tính toán lưu vào một biến phía trên lệnh return, sau đó nhúng biến đó vào JSX).

Xem toàn bộ React cùng filter theo level & chủ đề con.

Mở danh sách React

Trong dấu ngoặc nhọn {} của JSX, bạn chỉ có thể đặt biểu thức (expressions) — tức là đoạn code có thể trả về một giá trị.

Cách xử lý trong JSX:
- Thay vì if/else: Dùng toán tử ba ngôi (? :) hoặc logical AND (&&).
- Thay vì vòng lặp for: Dùng hàm Array.prototype.map().

Ví dụ hợp lệ (Expression):

jsx

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

Ví dụ KHÔNG hợp lệ (Statement):

jsx

{ for (let i of items) { ... } } // ❌ Báo lỗi cú pháp

(Mẹo: Nếu logic quá phức tạp, hãy tính toán lưu vào một biến phía trên lệnh return, sau đó nhúng biến đó vào JSX).