Menggunakan Props di Function Component untuk Mengirim Data Fleksibel

Salah satu fitur utama dalam React adalah props (singkatan dari “properties”), yang memungkinkan kita mengirim data antar komponen dengan fleksibel. Props sangat berguna untuk membuat komponen yang dinamis, reusable, dan lebih modular.

Artikel ini akan membahas cara menggunakan props dalam Function Component, bagaimana cara mengirim dan menerima props, serta praktik terbaik untuk menjaga kode tetap clean dan efisien.

1. Apa Itu Props dalam React?

✅ Membantu mengirim data dari parent component ke child component.
✅ Props bersifat immutable – Tidak bisa diubah oleh child component.
✅ Membuat komponen lebih fleksibel dan bisa digunakan ulang.
✅ Mempermudah pemisahan komponen dan meningkatkan keterbacaan kode.

Props memungkinkan kita menampilkan data yang berbeda tanpa harus mengubah kode komponen. Misalnya, daripada membuat banyak komponen statis, kita bisa menggunakan satu komponen dinamis dengan props.

2. Cara Menggunakan Props dalam Function Component

📌 A. Mengirim Props dari Parent ke Child Component

Misalnya, kita ingin menampilkan nama pengguna di dalam sebuah komponen UserCard.

1️⃣ Membuat Komponen Parent (App.js)

import React from 'react';
import UserCard from './components/UserCard';

function App() {
  return (
    <div>
      <UserCard name="John Doe" age={25} />
      <UserCard name="Jane Smith" age={30} />
    </div>
  );
}

export default App;

Di sini, kita mengirim props name dan age ke komponen UserCard.

2️⃣ Menerima Props di Function Component (UserCard.js)

Buka src/components/UserCard.js dan buat function component untuk menerima props:

import React from 'react';

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

export default UserCard;

Sekarang, setiap kali kita memanggil UserCard dengan props yang berbeda, kontennya akan menyesuaikan.

📌 B. Menggunakan Props dengan Default Value

Kadang kita ingin memberikan nilai default untuk props jika tidak ada nilai yang diberikan.

function Greeting({ name = 'Guest' }) {
  return <h1>Hello, {name}!</h1>;
}

Jika kita tidak mengirim name, maka akan tampil:

Hello, Guest!

📌 C. Mengirim Data Props dalam Bentuk Object

Kita juga bisa mengirim props dalam bentuk object agar lebih clean:

const user = { name: "John Doe", age: 25 };
<UserCard {...user} />

Ini setara dengan:

<UserCard name="John Doe" age={25} />

3. Props vs State: Apa Bedanya?

4. Kapan Harus Menggunakan Props?

✅ Gunakan props jika:

• Data harus dikirim dari parent ke child component.
• Komponen harus bersifat reusable dan fleksibel.
• Data yang diterima oleh child component tidak boleh diubah di dalamnya.

❌ Jangan gunakan props jika:

• Data hanya digunakan dalam satu komponen (gunakan state).
• Komponen tidak membutuhkan input eksternal untuk tampilannya.

5. Kesimpulan

• Props memungkinkan kita mengirim data antar komponen dengan fleksibel.
• Props bersifat immutable, sehingga child component tidak bisa mengubahnya.
• Gunakan destructuring untuk membuat kode lebih clean dan mudah dibaca.
• Props bisa digunakan untuk mengirim berbagai jenis data, termasuk objek dan fungsi.
• Jika tidak ada nilai props, kita bisa menggunakan default props untuk menghindari error.

Dengan memahami konsep props ini, kita bisa membangun komponen React yang lebih modular, dinamis, dan scalable!