Latihan 2: Props — React

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

Kode awal sudah memanggil <ProductCard title="Laptop" price="Rp15.000.000" /> di App, dan ProductCard sudah menerima { title, price }. Biarkan keduanya. price di sini teks yang sudah berisi Rp, jadi dikirim pakai tanda kutip.

Di ProductCard, ganti comment dengan return sebuah <div> pembungkus.
Di dalam <div>, tulis <h3>{title}</h3>.
Di bawahnya, tulis <span className="price">{price}</span>. Di JSX, class ditulis className; di halaman jadi class="price".

Yang dicek: <h3> berisi persis Laptop, elemen dengan class price berisi persis Rp15.000.000, dan isi kedua tag itu langsung diawali kurung kurawal (<h3>{ dan className="price">{), bukan teks yang diketik.

Hint

ProductCard menerima title dan price dari App, lalu menampilkan keduanya lewat kurung kurawal.
Kembalikan satu <div> pembungkus berisi <h3> untuk title dan <span> dengan className="price" untuk price. Isi keduanya langsung diawali kurung kurawal, tanpa tambahan Rp.
return (<div><h3>{title}</h3><span className="price">{price}</span></div>)

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Props — React

Hint

Memperbarui Aplikasi