Props: Ngirim Data ke Component Lain di ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Apa Itu Props?

Dalam React, props (singkatan dari "properties") adalah cara kita mengirim data dari satu komponen ke komponen lain, biasanya dari parent component ke child component. Bayangkan props seperti paket data yang dikirim dari induk ke anaknya!

Props memungkinkan komponen menjadi lebih fleksibel dan bisa digunakan kembali dengan data yang berbeda.

2. Cara Menggunakan Props

Mari kita lihat contoh dasar penggunaan props dalam React.

Contoh Tanpa Props (Komponen Statis)

const Salam = () => {
  return <h1>Halo, pengguna React!</h1>;
};

Komponen ini selalu menampilkan teks yang sama. Tapi bagaimana kalau kita ingin mengubah pesan tanpa mengedit komponen? Di sinilah props berguna!

Contoh Dengan Props (Komponen Dinamis)

const Salam = ({ nama }) => {
  return <h1>Halo, {nama}!</h1>;
};

const App = () => {
  return <Salam nama="Budi" />;
};

Sekarang komponen Salam bisa menampilkan nama yang berbeda-beda berdasarkan props yang diberikan.

3. Menggunakan Props dalam Komponen Kompleks

Kita juga bisa mengirim beberapa props sekaligus ke dalam sebuah komponen.

Contoh: Komponen Kartu Profil

const ProfileCard = ({ nama, umur, pekerjaan }) => {
  return (
    <div className="card">
      <h2>{nama}</h2>
      <p>Umur: {umur}</p>
      <p>Pekerjaan: {pekerjaan}</p>
    </div>
  );
};

const App = () => {
  return (
    <ProfileCard nama="Ani" umur={25} pekerjaan="Web Developer" />
  );
};

Komponen ProfileCard sekarang bisa menampilkan berbagai informasi berdasarkan props yang diberikan.

4. Props dengan Nilai Default

Bagaimana kalau kita lupa memberikan props? React tidak akan marah, tapi kita bisa memberikan nilai default agar tidak muncul undefined.

const Salam = ({ nama = "Pengguna" }) => {
  return <h1>Halo, {nama}!</h1>;
};

const App = () => {
  return <Salam />; // Akan menampilkan "Halo, Pengguna!"
};

Props nama memiliki nilai default "Pengguna", sehingga jika tidak diberikan, komponen tetap berfungsi dengan baik.

5. Props adalah Read-Only

Props bersifat immutable, artinya kita tidak bisa mengubah nilai props di dalam komponen child. Jika kita mencoba mengubah props secara langsung, React akan memberi peringatan.

Misalnya ini adalah contoh yang salah:

const Profile = ({ nama }) => {
  nama = "Nama Baru"; //  Ini tidak diperbolehkan!
  return <h1>{nama}</h1>;
};

Jika ingin mengubah nilai props, kita harus mengubahnya di komponen induk dan mengirimkan props baru.

6. Kesimpulan

 Props digunakan untuk mengirim data dari parent ke child component.  Props membuat komponen lebih fleksibel dan bisa digunakan kembali.  Props bersifat immutable (tidak bisa diubah di dalam child component). Kita bisa memberikan nilai default untuk props agar lebih aman.

Dengan props, komponen React menjadi lebih modular dan mudah dikelola. Jadi, siap mengirim data ke seluruh komponen?