Tampilkan dengan &&

Termasuk bagian Dasar-Dasar dalam perjalanan React di Coddy. Pelajaran 34 dari 42.

Sering kali tidak ada else: kamu hanya ingin sesuatu muncul saat kondisi terpenuhi. Trik && menangani tampilkan atau tidak:

{unread > 0 && <span>You have {unread} new messages</span>}

Cara kerjanya: && mengembalikan sisi kanan ketika sisi kiri bernilai true, lalu React merendernya. Ketika sisi kiri bernilai false, tidak ada yang dirender. Ini adalah ternary dengan bagian : null yang dihilangkan:

{cond ? <X /> : null}   // sama dengan
{cond && <X />}

Tantangan

Mudah

Tampilkan badge kotak masuk hanya saat ada sesuatu untuk dibaca. Komponen mendefinisikan unread.

Dengan menggunakan &&, tampilkan <span> dengan id="badge" dan teks 3 new messages (buat angkanya dari variabel!), tetapi hanya saat unread lebih besar dari 0.

Coba sendiri

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