Hiển thị bằng toán tử ba ngôi

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

Dấu ngoặc nhọn trong JSX không thể chứa câu lệnh if, nhưng lại rất phù hợp với toán tử ba ngôi, có thể xử lý gần như mọi trường hợp chọn một trong hai trên màn hình:

{isLoggedIn ? 'Welcome back!' : 'Please log in'}

Điều kiện trước, tiếp theo là giá trị khi true, rồi đến giá trị khi false. Cả hai vế đều có thể là phần tử JSX hoàn chỉnh:

{isLoggedIn
    ? <p>Welcome back!</p>
    : <button>Log in</button>}

Kết hợp nó với state, trang sẽ chuyển đổi ngay lập tức: đảo giá trị boolean, React sẽ kết xuất lại nhánh còn lại.

Thử thách

Dễ

Tạo một dòng trạng thái đăng nhập.

Thêm trạng thái boolean loggedIn, ban đầu là false.
Nút (id="login") đảo trạng thái mỗi khi được nhấp.
Đoạn văn (id="status") hiển thị Welcome back! khi đã đăng nhập và Please log in trong trường hợp còn lại, bằng toán tử ba ngôi.

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>