Durum ile Değiştirme

Coddy'nin React Journey'sinin Temeller bölümünün bir parçası. Ders 25 / 42.

State sadece sayılardan ibaret değildir. Bir boolean state, bir şeyleri göstermek ve gizlemek için kullanılan standart bir anahtardır:

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

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

Birlikte çalışan iki ipucu:

setIsOpen(!isOpen): ! işareti boolean değerini tersine çevirir, böylece tek bir button hem açar hem de kapatır
{condition ? jsx : null}: null render etmek hiçbir şey render etmez; eleman gizlenmez, hiç var olmaz

Görev

Orta

Bir spoiler gösterimi oluştur.

revealed ile başlayan boolean durumu false ekle.
id="toggle" düğmesi, her tıklamada durumu tersine çevirir.
Gösterildiğinde, <p> değerine ve id="secret" metnine sahip bir The cake is real göster; aksi takdirde null oluştur.

Kendin dene

<!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>