ReactJS #6: Props – Cara Mengirim Data Antar Komponen

ReactJS #6: Props

Cara Mengirim Data Antar Komponen
(Seperti Membawa Oleh-oleh)

Halo, petualang React! 🧭

Pernahkah kamu pulang liburan lalu membawa oleh-oleh untuk teman? Oleh-oleh itu bisa berupa makanan, mainan kecil, atau cerita seru. Nah, di React, kita juga bisa mengirim "oleh-oleh" dari satu komponen ke komponen lainnya. Oleh-oleh ini namanya props (kependekan dari properties).

🏠 Induk → 🎁 Props → 🧸 Anak

🔎 Apa Itu Props?

Props adalah cara kita mengirim data dari komponen induk (parent) ke komponen anak (child). Ibaratnya, komponen induk memberi bingkisan ke komponen anak. Komponen anak bisa menerima bingkisan itu dan menampilkannya.

Contoh sederhana: kita punya komponen Salam yang ingin kita beri nama orang yang akan disapa. Tanpa props, komponen Salam cuma bisa bilang "Halo" saja. Dengan props, kita bisa bilang "Halo, Andi!" atau "Halo, Siti!" tergantung nama yang kita kirim.

📦 Cara Membuat dan Mengirim Props

Mengirim props mirip dengan memberi atribut pada tag HTML. Misalnya kita punya komponen <Salam />, kita bisa menambahkan props nama seperti ini:

<Salam nama="Andi" />

Di dalam komponen Salam, kita menerima props sebagai parameter fungsi, lalu menggunakannya di dalam JSX dengan kurung kurawal { }.

function Salam(props) { return <h1>Halo, {props.nama}!</h1>; }

Maka di browser akan muncul: Halo, Andi!

🧪 Contoh Lengkap: Komponen dengan Props

Buka file App.js di proyek React-mu, lalu ganti dengan kode berikut:

// Komponen anak yang menerima props function Sambutan(props) { return ( <div style={{ backgroundColor: 'lightgreen', padding: '20px', borderRadius: '20px' }}> <h2>Halo, {props.nama}!</h2> <p>Kamu berusia {props.umur} tahun.</p> {props.ucapan && <p>Pesan: {props.ucapan}</p>} </div> ); } // Komponen induk (App) yang mengirim props function App() { return ( <div> <h1>Belajar Props: Oleh-oleh dari Induk</h1> <Sambutan nama="Andi" umur={10} ucapan="Selamat belajar React!" /> <Sambutan nama="Siti" umur={8} /> <Sambutan nama="Budi" umur={12} ucapan="Keren banget!" /> </div> ); } export default App;

Penjelasan:

• Komponen Sambutan menerima satu parameter props. Di dalamnya kita bisa mengakses props.nama, props.umur, dan props.ucapan.
• Di komponen App, kita memanggil Sambutan tiga kali dengan props yang berbeda. Perhatikan bahwa umur={10} menggunakan kurung kurawal karena kita mengirim angka (bukan string). String bisa langsung nama="Andi".
• Baris {props.ucapan && ...} artinya: jika props.ucapan ada, tampilkan elemen paragraf. Ini trik untuk menampilkan sesuatu hanya jika props diberikan.

Coba jalankan dengan npm start. Kamu akan melihat tiga kotak hijau dengan sapaan yang berbeda-beda. Keren, kan? Hanya dengan satu komponen, kita bisa membuat tampilan yang berbeda hanya dengan mengirim props yang berbeda.

🎁 Props Bisa Berupa Apa Saja

Props tidak hanya string dan angka. Kita bisa mengirim:

• Boolean: <Tombol besar={true} /> atau cukup <Tombol besar /> (artinya true).
• Array: <DaftarBuah items={['apel', 'pisang']} />
• Objek: <Profil data={{nama: 'Andi', umur: 10}} />
• Fungsi: nanti kita pakai untuk menangani klik.
• Elemen JSX: bahkan kita bisa mengirim potongan tampilan.

Contoh props array:

function DaftarBuah(props) { return ( <ul> {props.items.map((buah, index) => <li key={index}>{buah}</li>)} </ul> ); } // Di App: <DaftarBuah items={['Apel', 'Pisang', 'Jeruk']} />

🧾 Aturan Penting Props

• Props itu read-only (hanya bisa dibaca). Komponen anak tidak boleh mengubah props yang diterima. Ibarat oleh-oleh, kamu bisa membuka dan menikmatinya, tapi kamu tidak bisa mengubah isinya menjadi lain. Kalau mau mengubah data, itu urusan komponen induk (nanti pakai state).
• Nama props bebas, tapi usahakan nama yang bermakna, seperti nama, umur, warna.
• Props mengalir satu arah: dari induk ke anak. Tidak bisa sebaliknya (kecuali dengan bantuan fungsi, nanti di artikel lanjutan).

🎨 Latihan: Membuat Kartu Keluarga dengan Props

Buat komponen bernama KartuKeluarga yang menerima props: nama, umur, peran, dan foto (bisa pakai emoji atau URL gambar). Lalu di App, tampilkan tiga kartu: untuk Ayah, Ibu, dan Anak. Beri gaya yang rapi.

Contoh solusi (coba dulu sendiri sebelum lihat):

function KartuKeluarga(props) { return ( <div style={{ border: '3px solid #f7b731', borderRadius: '30px', padding: '20px', margin: '15px', display: 'inline-block', width: '200px', textAlign: 'center', backgroundColor: '#fff2d4' }}> <div style={{ fontSize: '4em' }}>{props.foto || '👤'}</div> <h2>{props.nama}</h2> <p>Umur: {props.umur} tahun</p> <p>Peran: {props.peran}</p> </div> ); } function App() { return ( <div style={{ display: 'flex', flexWrap: 'wrap' }}> <KartuKeluarga nama="Budi" umur={40} peran="Ayah" foto="👨" /> <KartuKeluarga nama="Siti" umur={35} peran="Ibu" foto="👩" /> <KartuKeluarga nama="Andi" umur={8} peran="Anak" foto="🧒" /> </div> ); }

💡 Pertanyaan: Apa yang terjadi jika kita lupa mengirim props foto? Di komponen kita memberi nilai default props.foto || '👤', jadi akan tampil '👤'. Ini teknik memberi nilai cadangan.

🚀 Kesimpulan

• Props adalah cara mengirim data dari komponen induk ke komponen anak.
• Props ditulis seperti atribut HTML, dan diterima sebagai parameter fungsi komponen.
• Props bersifat read-only (tidak bisa diubah oleh anak).
• Dengan props, komponen kita bisa menjadi lebih fleksibel dan bisa dipakai ulang dengan data berbeda.

Di artikel selanjutnya kita akan belajar tentang State – data yang bisa berubah di dalam komponen. State ini seperti perasaan kita yang bisa berubah-ubah. Sampai jumpa!

Lanjut ke ReactJS #7: State ▶

✨ Props itu oleh-oleh, kirimkan dengan cinta dari induk ke anak! ✨