Mengoper Props ke Komponen

Props umum

Props adalah informasi yang Anda kirimkan pada tag JSX. Sebagai contoh, className, src, alt, width, dan height adalah beberapa contoh dari props yang bisa Anda kirimkan pada <img>:

Props yang bisa dikirimkan pada tag <img> sudah didefinisikan sebelumnya (ReactDOM menyesuaikan dengan standar HTML). Namun Anda bisa mengirimkan props apa pun pada komponen Anda sendiri, Misalnya <Avatar>, untuk dikustomisasi. Begini caranya!

Mengoper props ke komponen

Pada kode ini, komponen Profile tidak mengirimkan props apa pun pada komponen anaknya, yaitu Avatar:

export default function Profile() {
  return (
    <Avatar />
  );
}

Anda bisa memberi Avatar beberapa props dalam dua langkah.

Langkah 1: Mengoper props ke komponen anak

Pertama-tama, kirimkan beberapa props pada Avatar. Sebagai contoh, mari kirimkan dua props: person (sebuah objek), dan size (sebuah angka):

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

Sekarang Anda bisa membaca props tersebut di dalam komponen Avatar.

Langkah 2: Membaca props di dalam komponen anak

Anda bisa membaca props tersebut dengan mendaftarkan namanya yaitu person, size dengan cara dipisahkan dengan koma di dalam ({ dan }) langsung setelah function Avatar. Hal ini memungkinkan Anda untuk menggunakannya di dalam kode Avatar, sama halnya saat Anda menggunakan variabel.

function Avatar({ person, size }) {
  // sekarang person dan size bisa Anda pakai di sini
}

Tambahkan beberapa logika pada Avatar yang menggunakan props person dan size untuk di-render, dan selesai.

Sekarang Anda bisa membuat Avatar untuk di-render dalam banyak cara dan dengan props yang berbeda. Cobalah utak-atik nilainya!

Props membuat Anda berpikir tentang komponen induk dan komponen anak secara terpisah. Sebagai contoh, Anda bisa mengubah props person atau size di dalam Profile tanpa perlu memikirkan bagaimana Avatar menggunakannya. Begitupun, Anda bisa mengubah bagaimana Avatar menggunakan props tersebut, tanpa menghiraukan Profile.

Anda bisa menganggap props seperti “kenop” yang bisa disesuaikan. Props berperan sama seperti arguments pada functions—Nyatanya, props adalah satu-satunya argument pada komponen Anda! Komponen fungsi React menerima satu argument, sebuah objek props.:

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

Biasanya Anda tidak memerlukan objek props secara utuh, maka Anda memecahnya menjadi props tersendiri.

function Avatar({ person, size }) {
  // ...
}

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

Menentukan nilai bawaaan untuk prop

Jika Anda ingin memberi prop nilai bawaan untuk berjaga-jaga saat tidak ada nilai yang ditentukan, Anda bisa melakukannya dengan destructring lalu menaruh = dan nilai bawaannya tepat setelah parameter:

function Avatar({ person, size = 100 }) {
  // ...
}

Sekarang, jika <Avatar person={...} /> di-render tanpa menerima prop size, size akan bernilai 100.

Nilai bawaan hanya akan terpakai jika prop size tidak ada atau jika Anda mengirim size={undefined}. Namun jika Anda mengirim size={null} atau size={0}, nilai bawaan tidak akan terpakai.

Meneruskan props dengan sintaksis spread JSX

Terkadang, mengirim props bisa sangat repetitif:

function Profile({ person, size, isSepia, thickBorder }) {
  return (
    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>
  );
}

Tidak ada salahnya dengan kode yang repetitif—itu membuatnya lebih mudah untuk dibaca. Namun terkadang Anda mungkin lebih menyukai keringkasan. Beberapa komponen meneruskan semua propsnya kepada komponen anaknya, persis seperti yang Profile lakukan dengan Avatar. Karena mereka tidak menggunakan propsnya secara langsung, ini akan masuk akal untuk menggunakan sintaksis ”spread” yang mana lebih ringkas:

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

Ini akan meneruskan semua props milik Profile pada Avatar tanpa menuliskannya satu-persatu.

Gunakan sintaksis spread dengan batasan. Jika Anda menggunakannya pada setiap komponen, maka ada yang salah. Seringkali, ini menunjukan bahwa Anda perlu memecah komponen Anda dan mengirim anaknya sebagai JSX. Mari kita bahas!

Mengoper JSX sebagai anak

Sudah umum untuk menyisipkan tag bawaan pada peramban:

<div>
  <img />
</div>

Terkadang Anda ingin menyisipkan komponen Anda dengan cara yang sama:

<Card>
  <Avatar />
</Card>

Saat Anda menyisipkan konten ke dalam tag JSX, komponen induk akan menerima konten tersebut dalam bentuk prop yang disebut children. Sebagai contoh, Komponen Card di bawah akan menerima prop children yang diisi <Avatar /> lalu me-rendernya dengan cara membungkusnya ke dalam div:

Cobalah ubah <Avatar> yang ada di dalam <Card> dengan teks untuk melihat bagaimana komponen Card bisa disisipkan konten apa pun. Komponen tersebut tidak perlu “mengetahui” apa yang di-render di dalamnya. Anda lihat betapa fleksibelnya hal ini.

Anda bisa menganggap bahwa komponen dengan prop children itu mempunyai “lubang” yang bisa “diisi” oleh komponen induknya dengan JSX secara bebas. Anda akan sering menggunakan prop children sebagai pembungkus: panels, grids, dan lainnya.

Bagaimana props berubah seiring waktu

Komponen Clock di bawah menerima dua props dari komponen induknya: color dan time. (Kode untuk komponen induknya dihilangkan karena itu menggunakan state, yang mana belum kita bahas untuk saat ini.)

Coba ubahlah warna pada kotak pilihan di bawah:

Contoh ini menggambarkan bahwa sebuah komponen mungkin menerima props yang berbeda seiring waktu. Props tidak selalu bersifat tetap! Begini, prop time berubah setiap detik, dan prop color berubah ketika Anda memilih warna lain. Data pada komponen akan ditampilkan props kapan saja, bukan hanya di awal.

Bagaimanapun, props bersifat immutable—Sebuah istilah pada ilmu komputer yang berarti “tidak dapat diubah”. Saat sebuah komponen ingin mengubah propsnya (sebagai contoh, untuk merespon interaksi pengguna atau merespon data baru), mereka harus “meminta” komponen induknya untuk mengirim dirinya props yang lain—objek baru! Lalu props yang lama akan disingkirkan, dan nantinya mesin JavasCript akan mengambil kembali memori yang dipakai oleh mereka.

Jangan mencoba untuk “mengubah props“. Ketika Anda perlu merespon masukan pengguna (misalnya mengubah warna yang dipilih), Anda akan memerlukan ”set state”, yang mana akan Anda pelajari pada State: Memori Milik Komponen.