Latihan 2: Styling Komponen — React

Latihan 2 dari materi Styling Komponen di React — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal sudah punya function Badge({ type, children }) dan App yang merender dua badge, <Badge type="success">Berhasil</Badge> dan <Badge type="error">Gagal</Badge>. Biarkan App. Ganti return null di Badge:

Kembalikan <span> berisi {children}.
Hitung class-nya dari type dengan kurung kurawal: className={type === "success" ? "badge-success" : "badge-error"}. Jangan tulis className="badge-success" yang tetap.

Yang dicek:

Ada elemen dengan class badge-success, dan isinya persis Berhasil.
Ada elemen dengan class badge-error, dan isinya persis Gagal.
<Badge di App masih menerima type=.
Kodenya memakai className={...}.

Hint

Satu komponen Badge melayani dua tampilan: nama class-nya dipilih dari prop type tiap kali dirender.
Kembalikan <span> dengan className={...} berisi ternary yang memilih badge-success atau badge-error dari type, dan taruh {children} di dalamnya.
return <span className={type === "success" ? "badge-success" : "badge-error"}>{children}</span>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Styling Komponen — React

Hint

Memperbarui Aplikasi