Ngasih "Bekal" ke Komponen: Cara Ngoper Data Pake Props di React!

Udah bisa bikin komponen React yang keren? Mantap! Tapi, seringkali komponen kita itu gak bisa berdiri sendiri. Dia butuh "informasi" atau "data" dari luar biar bisa nampilin sesuatu yang dinamis atau beda-beda.

Misalnya, kamu punya komponen KartuUcapan. Kamu pasti pengen kan kartu itu bisa nampilin nama penerima yang beda-beda, atau pesan ucapan yang beda-beda, tanpa harus bikin komponen KartuUcapanUntukBudi, KartuUcapanUntukAni, dst?

Nah, di sinilah Props (singkatan dari Properties) berperan! Props itu kayak "bekal" atau "paket data" yang bisa kamu kirim dari komponen parent (yang manggil) ke komponen child (yang dipanggil).

Apa Itu Props?

Secara sederhana, Props adalah argumen yang diterima oleh sebuah komponen React. Props ini ngasih cara buat komponen parent buat ngasih konfigurasi atau data ke komponen anaknya.

• Cara Ngirim Props: Dari komponen parent, kamu ngirim props ke komponen child mirip kayak ngasih atribut ke tag HTML biasa.
• Cara Nerima Props: Di komponen child (yang berupa Functional Component), props ini bakal diterima sebagai satu objek yang jadi argumen pertama dari fungsi komponen itu. Biasanya argumen ini dinamain props.
• Sifat Props: Props itu READ-ONLY (hanya bisa dibaca) di komponen child! Artinya, komponen child gak boleh dan gak bisa ngubah nilai props yang dia terima dari parent-nya. Props itu kayak "perintah" atau "data titipan" dari parent yang harus diikutin/ditampilin apa adanya sama si child. Kalau child butuh ngubah sesuatu, dia harus "minta tolong" ke parent (biasanya lewat fungsi callback yang dikirim sebagai prop juga, ini agak advance). Ini penting buat ngejaga alur data satu arah.

Ngirim dan Nerima Props: Yuk, Praktik!

Mari kita liat contohnya biar lebih jelas.

Contoh: Komponen SalamPengguna yang Bisa Nampilin Nama Beda-Beda

File App.jsx (Parent Component):

import React from 'react';
 
// Komponen child kita
function SalamPengguna(props) {
  // 'props' di sini adalah objek yang isinya semua props yang dikirim dari parent
  console.log(props); // Coba liat isi props di konsol!
  return <h1>Halo, {props.nama}! Selamat datang di React.</h1>;
}
 
function App() {
  return (
    <div>
      {/* Manggil SalamPengguna dan ngirim prop 'nama' */}
      <SalamPengguna nama="Budi" /> 
      <SalamPengguna nama="Siti" />
      <SalamPengguna nama="Charlie" />
 
      {/* Kita juga bisa ngirim props lain */}
      <InfoTambahan kota="Jakarta" usia={25} />
    </div>
  );
}
 
// Komponen InfoTambahan
function InfoTambahan(props) {
  return (
    <p>
      Pengguna dari kota {props.kota} ini berusia {props.usia} tahun.
    </p>
  );
}
 
export default App;

Penjelasan:

1. Di komponen App, kita manggil komponen SalamPengguna tiga kali.
2. Setiap kali manggil, kita ngasih prop yang namanya nama dengan nilai yang beda-beda ("Budi", "Siti", "Charlie"). Sintaksnya kayak atribut HTML: nama="Budi".
3. Di dalem fungsi SalamPengguna(props), argumen props itu bakal jadi objek.
   • Pas dipanggil dengan <SalamPengguna nama="Budi" />, objek props bakal jadi: { nama: "Budi" }.
   • Pas dipanggil dengan <SalamPengguna nama="Siti" />, objek props bakal jadi: { nama: "Siti" }.
4. Kita bisa ngakses nilai prop itu pake dot notation: props.nama.
5. Di contoh InfoTambahan, kita ngirim prop kota (string) dan usia (number). Perhatiin, kalau nilai prop-nya bukan string (kayak angka 25 atau boolean true), kamu harus ngapit nilainya pake kurung kurawal {} di JSX: usia={25}. Kalau string, kutip biasa udah cukup: kota="Jakarta".

Output di Browser:

Halo, Budi! Selamat datang di React.
Halo, Siti! Selamat datang di React.
Halo, Charlie! Selamat datang di React.
Pengguna dari kota Jakarta ini berusia 25 tahun.

Destructuring Props Biar Lebih Ringkes

Nulis props.nama, props.usia terus-terusan kadang bisa bikin kode agak panjang. Ada cara yang lebih ringkes buat ngambil nilai dari objek props pake destructuring assignment JavaScript.

Kamu bisa ngelakuin destructuring langsung di parameter fungsinya:

// Cara lama
// function InfoPengguna(props) {
//   return <p>Kota: {props.kota}, Usia: {props.usia}</p>;
// }
 
// Cara baru dengan destructuring di parameter
function InfoPengguna({ kota, usia }) { // Langsung ambil 'kota' dan 'usia' dari objek props
  return <p>Kota: {kota}, Usia: {usia}</p>;
}
 
// Atau destructuring di dalem fungsi (kurang umum buat props, tapi bisa)
// function InfoPengguna(props) {
//   const { kota, usia } = props;
//   return <p>Kota: {kota}, Usia: {usia}</p>;
// }
 
// Cara manggilnya tetep sama:
// <InfoTambahan kota="Bandung" usia={30} />

Cara ini bikin kode di dalem komponen jadi lebih bersih karena kamu bisa langsung pake nama atau usia tanpa perlu props. di depannya.

props.children: Ngambil Konten "Anak" Komponen

Ada satu prop spesial yang namanya children. props.children ini ngacu ke konten apa pun yang kamu taruh di antara tag pembuka dan tag penutup komponenmu pas kamu manggilnya.

Contoh: Komponen KotakPembungkus

// File: KotakPembungkus.jsx
function KotakPembungkus(props) {
  return (
    <div style={{ border: '1px solid gray', padding: '10px', margin: '5px' }}>
      {/* Nampilin konten yang ada di antara <KotakPembungkus>...</KotakPembungkus> */}
      {props.children} 
    </div>
  );
}
 
// File: App.jsx
// import KotakPembungkus from './KotakPembungkus';
 
function App() {
  return (
    <div>
      <KotakPembungkus>
        {/* Ini semua bakal jadi props.children di KotakPembungkus */}
        <h2>Judul di Dalem Kotak</h2>
        <p>Ini paragraf yang juga ada di dalem kotak.</p>
      </KotakPembungkus>
 
      <KotakPembungkus>
        <p>Kotak lain cuma isi satu paragraf.</p>
      </KotakPembungkus>
    </div>
  );
}

Komponen KotakPembungkus ini jadi kayak "wadah" generik yang bisa nampilin konten apa aja yang kamu masukin ke dalemnya. props.children bisa berupa teks, elemen JSX lain, atau bahkan komponen lain.

Default Props (Nilai Default buat Prop)

Gimana kalau pas manggil komponen, kita lupa ngasih nilai buat salah satu prop-nya? Secara default, prop itu bakal jadi undefined di dalem komponen child.

Kamu bisa ngasih nilai default buat props kalau-kalau parent gak ngirim nilai itu. Cara paling gampang di functional component adalah pake default parameter JavaScript (ES6):

function TombolCustom({ teks = "Klik Saya", warnaBackground = "blue" }) {
  // Kalau prop 'teks' gak dikirim, nilainya bakal "Klik Saya"
  // Kalau prop 'warnaBackground' gak dikirim, nilainya bakal "blue"
  const styleTombol = {
    backgroundColor: warnaBackground,
    color: 'white',
    padding: '8px 16px',
    border: 'none',
    borderRadius: '4px'
  };
  return <button style={styleTombol}>{teks}</button>;
}
 
// Cara pake:
// <TombolCustom teks="Kirim" warnaBackground="green" /> 
// <TombolCustom teks="Batal" /> {/* warnaBackground bakal pake default "blue" */}
// <TombolCustom /> {/* teks dan warnaBackground bakal pake default */}

Validasi Tipe Props dengan PropTypes (Opsional, tapi Praktik Baik di Proyek Besar)

Di proyek yang lebih gede atau kalau kerja tim, kadang penting buat mastiin kalau props yang dikirim ke komponen itu tipe datanya bener (misal, prop usia harusnya number, bukan string).

Dulu, React punya fitur PropTypes bawaan. Sekarang, PropTypes itu jadi package terpisah (prop-types) yang perlu kamu instal.

npm install prop-types
# atau
yarn add prop-types

Terus kamu bisa definisiin tipe yang diharapkan buat tiap prop:

import PropTypes from 'prop-types';
 
function ProfilPengguna({ nama, umur, adalahMember }) {
  return (
    <div>
      <p>Nama: {nama}</p>
      <p>Umur: {umur}</p>
      <p>Member: {adalahMember ? "Ya" : "Tidak"}</p>
    </div>
  );
}
 
ProfilPengguna.propTypes = {
  nama: PropTypes.string.isRequired, // Wajib string
  umur: PropTypes.number.isRequired,  // Wajib number
  adalahMember: PropTypes.bool       // Boolean, opsional
};
 
ProfilPengguna.defaultProps = { // Bisa juga set defaultProps di sini
  adalahMember: false
};
 
// Kalau kamu ngirim prop dengan tipe yang salah (misal, umur="dua puluh lima"),
// bakal ada warning di konsol browser pas development.
// <ProfilPengguna nama="Citra" umur="dua puluh lima" /> // Ini bakal warning!

Buat belajar awal, PropTypes ini mungkin belum terlalu krusial, tapi bagus buat diketahui karena ini praktik yang baik buat ngejaga kualitas kode dan ngindarin bug di aplikasi yang lebih besar. (Di proyek yang pake TypeScript, validasi tipe ini udah ditangani sama TypeScript itu sendiri).

Props ini adalah cara fundamental buat bikin komponen React jadi dinamis dan reusable. Dengan ngirim data yang beda-beda lewat props, satu komponen yang sama bisa nampilin tampilan atau perilaku yang beda-beda.

Ingat, props itu ngalir dari parent ke child dan sifatnya read-only di child. Ini ngebantu ngejaga alur data yang jelas di aplikasimu.

Di materi berikutnya, kita bakal belajar soal "pasangan" props, yaitu State, yang ngebolehin komponen punya data internalnya sendiri yang bisa berubah!