Penggunaan Kondisional dan Perulangan

 

• Render Bersyarat (Conditional Rendering)

• Render Daftar dengan map()

• Menangani Key di Setiap Elemen

Dalam materi Penggunaan Kondisional dan Perulangan dalam JSX yang cocok untuk pemula hingga menengah, React dan JSX mendukung logika JavaScript, termasuk: Kondisional menentukan apakah suatu elemen harus di tampilkan atau tidak, Perulangan menampilkan daftar elemen dari array.

A. Kondisional Dalam JSX

    1.     Ternary Operator(Kondisi ? benar : salah)

    2.     Short-circuit (&&)

    3.     Fungsi Kondisional

Berikut Contoh sederhana fungsi kondisional

B. Perulangan Dalam JSX

Perulangan dalam JSX biasa dilakukan dengan array.map(), Karena JSX tidak mendukung for secara langsung

Berikut Contoh Sederhana

Menggunakan perulangan untuk Komponen

Kasus 1: Tampilkan pesan berdasarkan status login

Deskripsi:
Jika user login, tampilkan "Halo, Andi!". Jika tidak, tampilkan tombol "Login".