Bật tắt bằng trạng thá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 25 trên 42.

Trạng thái không chỉ là các con số. Trạng thái boolean là công tắc tiêu chuẩn để hiển thị và ẩn nội dung:

const [isOpen, setIsOpen] = useState(false);

<button onClick={() => setIsOpen(!isOpen)}>Menu</button>
{isOpen ? <p>I am visible!</p> : null}

Hai mẹo kết hợp với nhau:

setIsOpen(!isOpen): ! đảo giá trị boolean, nên một nút có thể vừa mở vừa đóng
{condition ? jsx : null}: khi render null, sẽ không có gì được render; phần tử không bị ẩn mà không tồn tại

Thử thách

Trung bình

Tạo tính năng hiện nội dung tiết lộ.

Thêm trạng thái boolean (boolean) revealed, ban đầu là false.
Nút (id="toggle") đảo trạng thái này mỗi khi được nhấp.
Khi trạng thái là đã tiết lộ, hiển thị một <p> có id="secret" và văn bản The cake is real; nếu không thì hiển thị null.

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>