Tất cả các cách Conditional Renderings trong React (Phần 1)

Conditional rendering (Render với điều kiện) trong React thì không còn gì xa lạ. Trong JSX - cú pháp mở rộng dùng cho React ta vẫn có thể dùng JavaScript thuần. Trong JavaScript bạn nên làm quen với câu lệnh if-else hoặc switch case, vì đó đều là những thứ quan trong trong việc học React. Bạn cũng có thể dụng chúng trong JSX vì JSX chỉ đơn giản là kết hợp HTML với JS.

Nhưng conditional rendering trong React là gì? Trong conditional render một component sẽ quyết định sẽ trả về element gì dựa trên một hay nhiều điều kiện được đưa ra. Ví dụ, nó có thể sẽ trả về một danh sách các item hoặc một message: "Danh sách trống". Khi một component có conditional rendering, thì những thứ ta nhìn thấy khi component được render sẽ khác nhau với mỗi trường hợp.

Bài viết hướng đến việc liệt kê các danh sách đầy đủ về các conditional renderings trong React. Nếu bạn biết những cách khác nữa, mong bạn hãy đóng góp ở phía dưới comment để mình sẽ update vào bài viết.