Materi
Komponen adalah fungsi, jadi pilihan tampilan ditulis dengan JavaScript biasa. Pilihan yang menyangkut seluruh hasil ditulis dengan if sebelum return. Bila tidak ada yang perlu ditampilkan, komponen mengembalikan null.
function PesanMember({ poin }) {
if (poin === undefined) return null;
let pesan = "Kumpulkan 100 poin untuk voucer";
if (poin >= 100) pesan = "Voucer Rp10.000 siap dipakai";
return <p>{pesan}</p>;
}Pilihan kecil di dalam JSX ditulis dengan operator ternary: {lunas ? "Lunas" : "Belum dibayar"}. Bila salah satu cabangnya kosong, pakai &&: {catatan && <p>{catatan}</p>} menampilkan paragraf hanya ketika catatan berisi teks. React tidak menampilkan apa pun untuk false, null, dan undefined.
&& menyimpan jebakan pada angka. JavaScript mengembalikan nilai sisi kiri bila sisi kiri dianggap salah, dan angka 0 bukan false, sehingga React menampilkannya: {jumlah && <span>{jumlah}</span>} memunculkan 0 di layar ketika jumlah nol. Dokumentasi React meminta sisi kiri && tidak diisi angka; ubah menjadi perbandingan seperti jumlah > 0.
