Cara Menghubungkan State dan Props agar Komponen Lebih Dinamis

State dan Props, Apa Bedanya?

Ketika membangun aplikasi React, kita sering mendengar dua istilah penting: State dan Props. Dua konsep ini sangat penting untuk membuat komponen lebih dinamis dan fleksibel.

📌 Perbedaan utama antara State dan Props:

• State → Data lokal dalam sebuah komponen yang bisa berubah.
• Props → Data yang dikirim dari komponen induk ke komponen anak.

Agar aplikasi kita lebih modular dan mudah dikelola, kita perlu menghubungkan State dan Props dengan cara yang efektif. Artikel ini akan membahas bagaimana mengelola dan menghubungkan state dengan props untuk membuat komponen React lebih interaktif!

1. Bagaimana State Mengontrol Komponen?

State digunakan untuk menyimpan data internal dalam komponen dan memperbaruinya saat ada perubahan. Mari kita lihat contoh sederhana:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  );
}

export default Counter;

📌 Penjelasan:

• useState(0) → Inisialisasi state dengan nilai awal 0.
• setCount(count + 1) → Memperbarui state saat tombol diklik.
• Setiap kali state berubah, komponen akan re-render dengan nilai terbaru.

✅ State cocok digunakan untuk:

• Menyimpan data sementara yang berubah seiring waktu (contoh: jumlah klik, status modal, input pengguna).
• Mengontrol perilaku komponen berdasarkan perubahan data internal.

2. Mengirim State sebagai Props ke Komponen Anak

Agar lebih modular, kita bisa mengirim state dari komponen induk ke komponen anak melalui props.

📌 Contoh State sebagai Props

import React, { useState } from 'react';
import CounterDisplay from './CounterDisplay';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <CounterDisplay count={count} />
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  );
}

export default Counter;

📌 Di komponen anak (CounterDisplay.js):

import React from 'react';

function CounterDisplay({ count }) {
  return <h2>Counter: {count}</h2>;
}

export default CounterDisplay;

✅ Keuntungan menggunakan props untuk mengirim state:

• Memisahkan logika dan tampilan komponen agar lebih bersih dan modular.
• Mudah digunakan kembali (reusable) di berbagai bagian aplikasi.
• Membantu mengelola state secara lebih terstruktur.

3. Menghubungkan State dan Props untuk Event Handling

Selain mengirim data ke komponen anak, kita juga bisa mengirim fungsi untuk mengubah state dari komponen anak!

📌 Contoh Mengirim State dan Event Handler sebagai Props

import React, { useState } from 'react';
import CounterButton from './CounterButton';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Counter: {count}</h2>
      <CounterButton onIncrement={() => setCount(count + 1)} />
    </div>
  );
}

export default Counter;

📌 Di komponen anak (CounterButton.js):

import React from 'react';

function CounterButton({ onIncrement }) {
  return <button onClick={onIncrement}>Tambah</button>;
}

export default CounterButton;

✅ Keuntungan mengirim event handler melalui props:

• Komponen anak bisa mengubah state yang dimiliki oleh komponen induk.
• Meningkatkan modularitas dan menghindari duplikasi kode.

❌ Kesalahan umum:

<button onClick={setCount(count + 1)}>Tambah</button> ❌

🚨 Salah! Jangan panggil fungsi langsung di onClick, harus berupa callback:

<button onClick={() => setCount(count + 1)}>Tambah</button> ✅

4. Menggunakan Props Default untuk Nilai Awal

Kadang kita ingin memberikan nilai default pada props jika tidak ada nilai yang dikirim dari komponen induk.

📌 Contoh Default Props

function CounterDisplay({ count = 0 }) {
  return <h2>Counter: {count}</h2>;
}

✅ Sekarang jika count tidak diberikan, maka akan otomatis bernilai 0!

📌 Kapan menggunakan default props?

• Jika ada nilai yang harus selalu ada.
• Untuk menghindari error jika props tidak dikirimkan.

5. Kesimpulan

✅ Gunakan state untuk menyimpan data internal yang berubah.
✅ Gunakan props untuk mengirim data dari komponen induk ke anak.
✅ Gunakan event handler dalam props untuk mengubah state dari komponen anak.
✅ Gunakan default props untuk menghindari nilai kosong atau undefined.

Dengan menghubungkan state dan props dengan benar, kita bisa membuat komponen yang lebih modular, fleksibel, dan mudah dikelola. Mulai terapkan teknik ini di proyek React-mu sekarang!