Materi
Props adalah data yang dikirim komponen induk ke komponen anak, ditulis seperti atribut: <Produk nama="Gula pasir 1 kg" harga={18500} />. Teks boleh memakai tanda kutip; angka, larik, objek, dan fungsi memakai kurung kurawal.
Fungsi komponen hanya menerima satu argumen, yaitu objek props. Karena itu props dibaca dengan destrukturisasi di kurung parameter: function Produk({ nama, harga }). Menulis function Produk(nama, harga) adalah kesalahan yang sering terjadi: parameter pertama berisi seluruh objek props, dan parameter kedua tidak pernah terisi.
function Ongkir({ kota, biaya = 10000 }) {
return <li>{kota}: {rupiah(biaya)}</li>;
}
<Ongkir kota="Bekasi" /> // biaya = 10000
<Ongkir kota="Jakarta" biaya={8000} />Nilai bawaan ditulis dengan tanda sama dengan di dalam destrukturisasi. Nilai itu hanya dipakai bila prop tidak dikirim atau bernilai undefined. Prop yang dikirim bernilai null atau 0 tetap dipakai apa adanya. Inilah bedanya dengan biaya || 10000, yang ikut mengganti 0.
JSX yang ditulis di antara tag pembuka dan penutup sebuah komponen diterima sebagai prop bernama children. Komponen pembungkus seperti Kartu cukup meletakkan {children} di tempat yang diinginkan, sehingga isinya bisa apa saja. Menyusun tampilan dari pembungkus dan isinya seperti ini disebut komposisi.
