Props adalah data yang dikirim komponen parent ke komponen child. Cara mengirimnya mirip atribut HTML: <Welcome name="Andi" />. Dengan props, satu komponen bisa menampilkan isi yang beda-beda. Mirip formulir pesanan kopi: formulirnya sama untuk semua pembeli, isiannya (nama, ukuran, gula) beda-beda, dan barista membuat kopi sesuai isian itu. Barista gak mencoret isian pembeli. Kalau pesanannya berubah, pembelinya yang mengisi formulir baru.
🧪 Tebakan cepat:
Appmenulis<ProductCard title="Mouse" price="150000" />, dan di dalamProductCardada{price + ongkir}denganongkirbernilai 10000. Yang tampil160000atau yang lain? Jawabannya ada di bagian "Teks pakai kutip, nilai lain pakai kurung kurawal".
Kirim dari parent, terima di child
function Welcome({ name }) {
return <h2>Halo, {name}!</h2>
}
function App() {
return (
<div>
<Welcome name="Andi" />
<Welcome name="Sari" />
</div>
)
}
Tag di App |
props yang diterima Welcome |
Hasil |
|---|---|---|
<Welcome name="Andi" /> |
{ name: "Andi" } |
<h2>Halo, Andi!</h2> |
<Welcome name="Sari" /> |
{ name: "Sari" } |
<h2>Halo, Sari!</h2> |
Appadalah parent: dia yang memakaiWelcomedan mengirim datanya.Welcomeadalah child.- React mengumpulkan semua atribut di tag
<Welcome ... />jadi satu objek bernamaprops, lalu memberikannya sebagai parameter pertama functionWelcome. { name }di parameter adalah destructuring: ambil propertinamedari objek props. Hasilnya sama dengan menulisfunction Welcome(props)lalu memakaiprops.name.{name}di dalam<h2>menampilkan isinya. Satu komponen, dua sapaan yang beda.
Banyak props sekaligus
function ProductCard({ title, price, ongkir = 10000 }) {
return (
<div className="kartu">
<h3>{title}</h3>
<span className="price">{price}</span>
<small>Total + ongkir: {price + ongkir}</small>
</div>
)
}
function App() {
return (
<div>
<ProductCard title="Laptop" price={7500000} />
<ProductCard title="Mouse" price={150000} />
<ProductCard title="Headset" price={350000} ongkir={0} />
</div>
)
}
| Kartu | props |
Total + ongkir |
|---|---|---|
| Laptop | { title: "Laptop", price: 7500000 } |
7510000 |
| Mouse | { title: "Mouse", price: 150000 } |
160000 |
| Headset | { title: "Headset", price: 350000, ongkir: 0 } |
350000 |
- Tiga tag, tiga objek props, tiga kartu. Komponennya tetap satu.
ongkir = 10000adalah nilai default: dipakai kalau propongkirgak dikirim. Laptop dan Mouse gak mengirimnya, jadi ongkirnya 10000.- Headset mengirim
ongkir={0}, jadi default-nya gak dipakai. Default cuma menggantikan prop yang gak dikirim (nilainyaundefined), bukan0. className="price"di JSX jadiclass="price"di halaman.
Teks pakai kutip, nilai lain pakai kurung kurawal
title="Laptop": tanda kutip mengirim string, alias teks.price={7500000}: kurung kurawal mengirim nilai JavaScript apa adanya, di sini number.- Tanda kutip selalu menghasilkan string, termasuk
price="150000". Tampilannya sama, tapi di JavaScript"150000" + 10000menyambung teks, hasilnya15000010000. Itu jawaban tebakannya: yang tampil15000010000, bukan160000.
Semua nilai selain teks dikirim lewat kurung kurawal:
<ProductCard
title="Laptop"
price={7500000}
tersedia={true}
tags={["promo", "baru"]}
ongkir={ongkirKota}
/>
Props cuma boleh dibaca
Props milik parent. Child cuma membacanya, gak mengubahnya. Kalau ProductCard butuh judul lain, App yang mengirim title baru. Cara App mengubah datanya (dengan state dan event) ada di pelajaran-pelajaran berikutnya.
function ProductCard(props) {
props.title = "Promo" // salah
return <h3>{props.title}</h3>
}
- Di mode development, React membekukan objek props, jadi baris itu langsung melempar
TypeError(di Chrome:Cannot assign to read only property 'title' of object). - Menimpa variabel hasil destructuring, misalnya
nama = "Budi", memang gak error karenanamacuma salinan. Tapi komponennya jadi membuang data dari parent: semua kartu menampilkan Budi. Anggap props selalu read-only.
⚠️ Jebakan yang sering ketemu
- Angka dikirim pakai tanda kutip.
price="150000"itu string, dan+jadi menyambung teks. Kirim angka denganprice={150000}. - Prop lupa dikirim. Isinya
undefined:{price}gak menampilkan apa-apa, danundefined + 10000hasilnyaNaN. Kirim semua prop yang dibutuhkan, atau beri nilai default. - Nilai diketik di dalam child.
<h3>Laptop</h3>di dalamProductCardbikin semua kartu berjudul Laptop. Tampilkan prop-nya:<h3>{title}</h3>. Latihan kedua mengecek isi<h3>dan elemen.pricediawali kurung kurawal. - Nama prop beda antara parent dan child.
Appmengirimname, child membacanama: hasilnyaundefined. Namanya harus sama persis, termasuk huruf besar-kecilnya.
TL;DR: Props adalah data dari parent ke child, ditulis seperti atribut: <Welcome name="Andi" />. React mengumpulkannya jadi satu objek props; child membacanya dengan destructuring function Welcome({ name }) atau props.name. Teks pakai tanda kutip; angka, boolean, array, dan variabel pakai kurung kurawal (price={150000}), karena "150000" + 10000 jadi 15000010000. Nilai default { ongkir = 10000 } cuma dipakai kalau prop-nya gak dikirim. Props read-only: child gak mengubahnya, parent yang mengirim nilai baru.
