Props: Mengirim Data ke Komponen

Komponen yang bisa diatur

Komponen yang selalu menampilkan teks yang sama kurang berguna. Props (properties) memungkinkan induk mengirim data ke anak, seperti argumen pada function.

<Kartu nama="Dina" peran="Mentor" />
<Kartu nama="Budi" peran="Murid" />

Menerima props

Props diterima sebagai satu object pada parameter pertama:

function Kartu(props) {
  return (
    <div className="kartu">
      <h3>{props.nama}</h3>
      <p>{props.peran}</p>
    </div>
  );
}

Lebih ringkas dengan destructuring langsung di parameter:

function Kartu({ nama, peran }) {
  return (
    <div className="kartu">
      <h3>{nama}</h3>
      <p>{peran}</p>
    </div>
  );
}

Mengirim berbagai tipe data

<Profil
  nama="Dina"                  // string: pakai kutip
  umur={20}                    // angka: pakai { }
  aktif={true}                 // boolean
  hobi={["baca", "renang"]}    // array
  alamat={{ kota: "Bandung" }} // object
  onKlik={() => alert("hi")}   // function
/>

Selain string literal, semuanya memakai { }. Atribut boolean aktif tanpa nilai berarti true.

Props bersifat read-only

Komponen tidak boleh mengubah props-nya sendiri:

function Salah({ nama }) {
  nama = "X";        // ❌ jangan
}

Jika tampilan perlu berubah, gunakan state (bab 10). Data mengalir satu arah: dari induk ke anak.

Props adalah cara komponen "berbicara"

• Induk → anak: kirim data lewat props.
• Anak → induk: kirim function lewat props (callback), lalu anak memanggilnya.

Props dengan spread

const data = { nama: "Dina", peran: "Mentor" };
<Kartu {...data} />

Memeriksa tipe props (opsional)

Di proyek serius gunakan TypeScript atau PropTypes agar kesalahan tipe ketahuan lebih awal.