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 açıklama bileşeni oluşturun.

false değeriyle başlayan, revealed adında boolean bir durum (state) ekleyin.
Düğme (id="toggle") her tıklandığında bu değeri tersine çevirmelidir.
Açıklandığında, id="secret" olan ve metni The cake is real olan bir <p> gösterin; aksi takdirde null render edin.

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>