Kuasai Data: Menggunakan Props untuk Mengirim Data Antar Komponen React (Part 4)

Di dunia React yang serba komponen, sering banget kita butuh ngirim data dari satu komponen ke komponen lain. Anggap aja kita punya komponen "Utama" yang berisi daftar nama-nama teman. Terus kita punya komponen "KartuNama" yang tugasnya nampilin nama-nama itu satu per satu.

Masa iya kita bikin sepuluh komponen KartuNama yang isinya sama persis tapi cuma beda nama? Kan capek copas doang! Nah, di sinilah Props beraksi sebagai pahlawan kesiangan yang menyelamatkan kita dari penderitaan copas berjamaah.

Apa Itu Props? Si Kurir Setia Antar Komponen

Secara sederhana, Props (singkatan dari properties) adalah cara utama untuk mengirim data dari komponen "induk" (parent) ke komponen "anak" (child).

Bayangin Props itu kayak kurir paket. Si komponen induk adalah pengirimnya, si komponen anak adalah penerimanya. Data yang dikirim ya isi paketnya. Dan yang paling penting: kurir ini cuma bisa ngirim paket ke bawah (dari induk ke anak). Gak bisa dari anak ke induk, apalagi ke samping.

Penting diingat: Props ini sifatnya read-only. Artinya, komponen anak gak boleh dan gak bisa mengubah data yang dikirimkan lewat props. Kalau mau diubah, yang ngirim data (komponen induk) yang harus mengubahnya. Mirip kayak kita nerima surat dari pos, kita cuma bisa baca, gak bisa ngubah isi suratnya terus balikin ke pengirim seolah-olah pengirimnya yang nulis.

Cara Kirim Data Pakai Props: Dari Induk ke Anak

Oke, langsung aja kita ke contoh ngodingnya biar gak cuma teori doang. Anggap kita punya komponen utama namanya App.js (sebagai induk) dan komponen sederhana Salam.js (sebagai anak) yang nanti bakal kita kasih nama lewat props.

Pertama, kita siapkan komponen anaknya dulu. Simpel aja, cuma nampilin teks 'Halo,' diikuti nama yang kita kasih.


// Salam.js
import React from 'react';

function Salam(props) {
  // Disini kita akan mengakses props.nama
  return <h2>Halo, {props.nama}!</h2>;
}

export default Salam;

Nah, sekarang di komponen induk (App.js), kita panggil si Salam dan kita kasih props. Kita bisa kasih props dengan atribut layaknya HTML biasa.


// App.js
import React from 'react';
import Salam from './Salam'; // Jangan lupa diimport ya!

function App() {
  return (
    <div>
      <h1>Aplikasi Sapa-Sapaan React</h1>
      <Salam nama="Budi" />
      <Salam nama="Ani" />
      <Salam nama="Chandra" />
      <p>Selamat datang di dunia Props!</p>
    </div>
  );
}

export default App;

Gampang kan? Cukup tambahin atribut nama="Nilai" pas kita manggil komponen <Salam />. Nilai dari atribut nama inilah yang akan dikirim sebagai props ke komponen Salam.

Ngambil Props di Komponen Anak: Kayak Buka Kado!

Di contoh Salam.js sebelumnya, kita ngambil props-nya gini: props.nama. Ini cara yang sah dan benar. Tapi, kalau props yang dikirim banyak, kodenya jadi panjang dan kurang enak dibaca.

Ada cara yang lebih nge-hits di kalangan developer React, yaitu pakai destructuring. Ini bikin kode kita lebih ringkas dan gampang dimengerti, kayak buka kado langsung tahu isinya.


// Salam.js (dengan destructuring props)
import React from 'react';

// Langsung destructuring parameter props
function Salam({ nama, ucapan = "Halo" }) { // Bisa juga kasih nilai default disini!
  return <h2>{ucapan}, {nama}!</h2>;
}

export default Salam;

Dengan function Salam({ nama }), kita langsung "mengeluarkan" properti nama dari objek props. Jadi, kita bisa langsung pakai nama tanpa perlu props.nama lagi. Lebih rapi, kan? Dan kalian lihat kan, kita juga bisa langsung kasih nilai default di dalam destructuring kalau misalkan props-nya gak dikirim!

Default Props: Ngasih Nilai Cadangan Biar Gak Undefined

Pernah ngalamin error undefined pas lagi ngoding? Pasti rasanya pengen banting keyboard, kan? Nah, di React, kalau kita lupa ngasih props ke komponen, hasilnya bisa jadi undefined. Untuk mencegah hal itu, kita bisa pakai defaultProps.

defaultProps ini fungsinya buat ngasih nilai "cadangan" kalau komponen induk lupa ngasih nilai props tertentu. Jadi, komponen kita tetap aman dan gak nge-bug.


// Salam.js (dengan defaultProps)
import React from 'react';

function Salam({ nama, ucapan }) {
  return <h2>{ucapan}, {nama}!</h2>;
}

// Menetapkan nilai default untuk props
Salam.defaultProps = {
  nama: 'Tamu Misterius', // Jika 'nama' tidak diberikan, akan pakai ini
  ucapan: 'Selamat datang', // Jika 'ucapan' tidak diberikan, akan pakai ini
};

export default Salam;

Dengan begini, kalau di App.js kita cuma panggil <Salam /> tanpa props, hasilnya bakal tetap tampil "Selamat datang, Tamu Misterius!". Aman sentosa dari error undefined!

Type Checking dengan PropTypes: Biar Tipe Datanya Bener!

Oke, defaultProps udah aman dari undefined. Tapi gimana kalau yang dikirim tipe datanya salah? Misal, harusnya angka tapi malah dikirim teks? React punya solusinya: PropTypes!

PropTypes ini bukan bawaan langsung dari React inti lagi, jadi kita perlu instal terpisah:


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

Setelah diinstal, kita bisa pakai di komponen kita untuk "memaksa" tipe data yang diharapkan. Kalau ada yang ngirim props dengan tipe data yang salah, React akan kasih peringatan di console browser (di mode development).


// Salam.js (dengan PropTypes)
import React from 'react';
import PropTypes from 'prop-types'; // Import PropTypes

function Salam({ nama, ucapan }) {
  return <h2>{ucapan}, {nama}!</h2>;
}

// Menetapkan nilai default
Salam.defaultProps = {
  nama: 'Tamu Misterius',
  ucapan: 'Selamat datang',
};

// Menentukan tipe data yang diharapkan untuk setiap props
Salam.propTypes = {
  nama: PropTypes.string, // 'nama' diharapkan bertipe string
  ucapan: PropTypes.string.isRequired, // 'ucapan' diharapkan string dan wajib ada
  usia: PropTypes.number, // Contoh props lain yang diharapkan number
};

export default Salam;

Nah, kalau di App.js kita panggil <Salam nama={123} />, React bakal ngasih tahu kalau nama harusnya string, bukan angka. Berguna banget buat aplikasi yang kompleks dan biar developer lain gak salah ngasih data!

Jangan Lupa, Props Itu Read-Only! (Mirip Cinta Bertepuk Sebelah Tangan)

Ini penting banget dan sering jadi sumber kebingungan pemula: Props itu tidak boleh diubah oleh komponen anak yang menerimanya! Ingat analogi kurir dan surat? Kamu cuma bisa baca isinya, gak bisa ngedit lalu bilang itu dari pengirim.

Kalau kamu coba mengubah nilai props di dalam komponen anak, React bakal ngasih warning (atau bahkan error tergantung konteksnya). Konsep ini disebut Immutability. Tujuannya agar aliran data di aplikasi React jadi lebih mudah diprediksi dan dikelola.

Lalu, gimana kalau kita memang butuh mengubah data itu di komponen anak? Tenang, itu bukan tugas Props. Itu tugas State, yang bakal kita bahas di bagian selanjutnya dari seri tutorial ini! Pokoknya, untuk sekarang, anggap Props itu kayak "informasi dari atasan" yang harus kamu terima apa adanya.

Kapan Kita Pake Props?

Props ini ibarat pisau Swiss Army-nya React. Kita pakai Props saat:

Kita mau ngirim teks dinamis ke komponen (kayak contoh nama tadi).
Kita mau ngirim angka, objek, array, atau bahkan fungsi sebagai konfigurasi ke komponen.
Kita mau bikin komponen jadi reusable alias bisa dipakai berkali-kali dengan data yang berbeda.
Kita mau ngasih tahu komponen anak kalau ada "sesuatu" yang terjadi di induk (misal, sebuah fungsi event handler yang dikirim sebagai props).

Penutup: Siap Jadi Master Data!

Mantap! Sekarang kamu udah nguasain salah satu konsep paling fundamental di React: Props! Kamu udah tahu gimana cara ngirim data dari induk ke anak, gimana cara nerimanya, ngasih nilai default, bahkan sampai validasi tipe data.

Ini adalah pondasi yang kuat banget buat bikin aplikasi React yang interaktif dan dinamis. Tanpa Props, komponen-komponen kita cuma pajangan statis yang gak bisa ngapa-ngapain. Sekarang, komponenmu bisa diajak ngobrol, dikasih data, dan pastinya jadi lebih hidup!

Jangan lupa terus berlatih ya! Coba-coba bikin komponen sendiri, terus kirimin data lewat props. Di bagian selanjutnya, kita bakal kenalan sama pasangannya Props yang tak kalah penting: State. Siap-siap buat merasakan kekuatan sesungguhnya dari komponen dinamis!

Latihan: Studi Kasus Ngoding Receh!

Bayangin kamu lagi lembur ngoding aplikasi "Daftar Belanjaan Programmer Anti-Lupa". Aplikasi ini punya daftar item yang mau dibeli, misalnya "Kopi", "Keyboard Mekanik", "Camilan buat begadang", dan lain-lain. Tiap item punya status: sudah dibeli atau belum.

Tugas kamu:

Buatlah komponen fungsional baru bernama ItemBelanja.js.
Komponen ItemBelanja ini harus bisa menerima dua props: namaItem (string) dan isDibeli (boolean).
Di dalam komponen ItemBelanja, tampilkan namaItem.
Jika isDibeli bernilai true, tambahkan efek teks coretan (gunakan tag <em> atau <span style="text-decoration: line-through;">) pada namaItem. Kalau false, tampilkan biasa saja.
Di komponen App.js (komponen induk), panggil beberapa komponen ItemBelanja dengan data yang berbeda, beberapa dengan isDibeli={true} dan beberapa dengan isDibeli={false}.
Bonus: Coba implementasikan defaultProps di ItemBelanja untuk namaItem dan isDibeli.

Contoh tampilan yang diharapkan (kalau isDibeli true, ada coretan):


<h3>Daftar Belanjaan Programmer</h3>
<ul>
  <li><em>Beli Kopi Arabika</em></li>
  <li>Beli Snack Bikin Kenyang</li>
  <li><em>Upgrade RAM Laptop</em></li>
</ul>

Selamat mencoba, para calon React Master!

Kuasai Data: Menggunakan Props untuk Mengirim Data Antar Komponen React (Part 4)

Daftar Isi