• Apa Itu Props?
• Menggunakan Props di Component
• Menggunakan Beberapa Props
• Destructuring Props
• Props Bersifat Read-Only
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang Components, bagaimana cara membuatnya, menggunakan kembali, hingga menyimpannya di file terpisah.

Pada artikel kali ini, kita akan membahas tentang Props. Konsep ini sangat penting karena dengan props kita bisa mengirim data dari satu component ke component lain.

Apa Itu Props?

Props (Properties) adalah cara untuk mengirim data dari parent component ke child component di React. Props bersifat read-only, artinya data yang dikirim tidak boleh diubah langsung oleh child component.

Jika diibaratkan, props adalah paket yang dikirim dari orang tua (parent) ke anak (child). Anak hanya bisa menerima paket tersebut, bukan mengubah isi paketnya.

Menggunakan Props di Component

Mari kita buat sebuah component sederhana bernama Welcome.

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

function App() {
  return (
    <div>
      <Welcome name="Budi" />
      <Welcome name="Siti" />
      <Welcome name="Andi" />
    </div>
  );
}

export default App;

Pada contoh di atas:

• Kita mengirim props bernama name ke component Welcome.
• Lalu props tersebut dipakai dengan {props.name}.
• Hasilnya akan menampilkan teks:
  • Halo, Budi!
  • Halo, Siti!
  • Halo, Andi!

Menggunakan Beberapa Props

Props bisa lebih dari satu.

function UserCard(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Umur: {props.age}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <UserCard name="Budi" age={20} />
      <UserCard name="Siti" age={22} />
    </div>
  );
}

export default App;

Hasilnya:

• Menampilkan nama dan umur sesuai props yang dikirim.

Destructuring Props

Supaya lebih rapi, kita bisa menggunakan destructuring.

function UserCard({ name, age }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Umur: {age}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <UserCard name="Budi" age={20} />
      <UserCard name="Siti" age={22} />
    </div>
  );
}

export default App;

Dengan destructuring, kita tidak perlu menulis props.name dan props.age berkali-kali.

Props Bersifat Read-Only

Props hanya untuk dibaca, bukan diubah.

function Welcome({ name }) {
  // ❌ Salah: props tidak boleh diubah
  // name = "Orang Lain";

  return <h1>Halo, {name}!</h1>;
}

Jika ingin mengubah data, kita harus menggunakan state (akan kita pelajari di artikel selanjutnya).

Kesimpulan

Pada artikel ini, kita sudah belajar tentang Props, yaitu cara mengirim data dari parent ke child component.

Kita sudah mencoba menggunakan props dasar, mengirim lebih dari satu props, menggunakan destructuring, dan memahami bahwa props bersifat read-only.

Di artikel berikutnya, kita akan membahas tentang State & useState, yaitu cara menyimpan dan mengelola data di dalam component.

Terima kasih