Sign in Subscribe
ReactJs

Mengenal Props di Class Component dan Cara Menggunakannya

Mengenal Props di Class Component dan Cara Menggunakannya
Photo by Safar Safarov / Unsplash

Dalam React, props (properties) adalah salah satu konsep utama yang memungkinkan kita untuk mengirim data dari satu komponen ke komponen lainnya. Props digunakan untuk membuat komponen menjadi lebih dinamis dan reusable, terutama dalam Class Component.

Pada artikel ini, kita akan membahas apa itu props di Class Component, bagaimana cara menggunakannya, dan beberapa contoh implementasinya dalam kode React.

1. Apa Itu Props dalam Class Component?

Props adalah objek yang berisi data yang dikirim dari parent component ke child component. Data ini bersifat immutable, yang berarti tidak bisa diubah oleh komponen penerima.

Karakteristik Props:

✅ Digunakan untuk mengirim data dari parent ke child component.
✅ Bersifat immutable – Data tidak bisa diubah oleh komponen yang menerimanya.
✅ Membantu membuat komponen yang lebih fleksibel dan reusable.

Dalam Class Component, props diakses menggunakan this.props.

2. Cara Menggunakan Props dalam Class Component

Mari kita buat contoh sederhana untuk memahami bagaimana props bekerja di Class Component.

📌 1. Membuat Parent Component

Di dalam App.js, kita akan membuat komponen App yang mengirimkan props ke komponen Greeting.

import React, { Component } from 'react';
import Greeting from './components/Greeting';

class App extends Component {
  render() {
    return (
      <div>
        <Greeting name="John Doe" age={25} />
        <Greeting name="Jane Smith" age={30} />
      </div>
    );
  }
}

export default App;

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

📌 2. Menerima Props di Class Component

Sekarang, kita buat file Greeting.js di dalam folder components/ untuk menerima props yang dikirim oleh App.js.

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return (
      <div>
        <h2>Halo, {this.props.name}!</h2>
        <p>Usia kamu: {this.props.age} tahun</p>
      </div>
    );
  }
}

export default Greeting;

📌 Penjelasan Kode:

  • this.props.name → Mengakses nilai dari props name.
  • this.props.age → Mengakses nilai dari props age.
  • Setiap kali komponen Greeting dipanggil di App.js, props akan diisi sesuai dengan nilai yang diberikan.

Hasil Output di Browser:

Halo, John Doe!
Usia kamu: 25 tahun

Halo, Jane Smith!
Usia kamu: 30 tahun

Setiap kali kita memanggil Greeting dengan props yang berbeda, konten akan berubah sesuai dengan data yang dikirim.

3. Menggunakan Default Props

Kadang, kita ingin memberikan nilai default untuk props jika tidak ada nilai yang dikirim dari parent component. Ini bisa dilakukan dengan defaultProps.

class Greeting extends Component {
  static defaultProps = {
    name: 'Guest',
    age: 18,
  };

  render() {
    return (
      <div>
        <h2>Halo, {this.props.name}!</h2>
        <p>Usia kamu: {this.props.age} tahun</p>
      </div>
    );
  }
}

Jika name atau age tidak diberikan, maka nilai default akan digunakan:

Halo, Guest!
Usia kamu: 18 tahun

4. Menggunakan Props dengan Destructuring

Untuk membuat kode lebih rapi, kita bisa menggunakan destructuring dalam Class Component.

class Greeting extends Component {
  render() {
    const { name, age } = this.props;
    return (
      <div>
        <h2>Halo, {name}!</h2>
        <p>Usia kamu: {age} tahun</p>
      </div>
    );
  }
}

Dengan cara ini, kita tidak perlu menulis this.props berkali-kali.

5. Kapan Harus Menggunakan Props dalam Class Component?

✅ Gunakan props jika:

  • Komponen menerima data dari parent component.
  • Data yang dikirim tidak boleh diubah oleh child component.
  • Komponen bersifat stateless (hanya menampilkan data tanpa mengubahnya).

❌ Jangan gunakan props jika:

  • Komponen harus mengubah data yang diterima (gunakan state).
  • Tidak ada data yang perlu dikirim dari parent ke child.

6. Kesimpulan

  • Props adalah cara untuk mengirim data dari parent ke child component dalam React.
  • Dalam Class Component, props diakses menggunakan this.props.
  • Props bersifat immutable, artinya child component tidak bisa mengubah props yang diterimanya.
  • Gunakan defaultProps untuk memberikan nilai default jika tidak ada props yang dikirim.
  • Gunakan destructuring untuk membuat kode lebih bersih dan mudah dibaca.

Dengan memahami cara kerja props dalam Class Component, kita bisa membuat komponen React yang lebih fleksibel dan reusable!

Read next