Passing Props

Mengirim Data dengan Props

Props (properties) adalah cara React mengirimkan data dari komponen induk ke komponen anak. Props memungkinkan komponen menjadi dinamis dan dapat dikonfigurasi.

Cara Kerja Props

Props dikirimkan seperti atribut HTML dan diterima sebagai parameter objek di komponen:

// Komponen anak menerima props
function UserCard({ nama, role, avatar }) {
  return (
    <div className="card">
      <img src={avatar} alt={nama} />
      <h3>{nama}</h3>
      <span>{role}</span>
    </div>
  );
}

// Komponen induk mengirim props
function App() {
  return (
    <UserCard
      nama="Khansa"
      role="Frontend Developer"
      avatar="/images/khansa.jpg"
    />
  );
}

Props adalah Read-Only

Satu hal penting: jangan pernah memodifikasi props di dalam komponen anak. Props bersifat immutable — komponen anak hanya boleh membaca, tidak boleh mengubahnya.

Default Props

Kamu bisa memberikan nilai default untuk props yang tidak dikirimkan:

function Button({ label = "Klik Saya", variant = "primary" }) {
  return <button className={variant}>{label}</button>;
}

Children Props

Props khusus children berisi konten yang diapit oleh tag komponen:

function Card({ children }) {
  return <div className="card">{children}</div>;
}

// Penggunaan:
<Card>
  <h2>Judul Card</h2>
  <p>Isi konten card.</p>
</Card>