Sign in Subscribe
ReactJs

Membuat Method Dinamis di React agar Lebih Fleksibel

Membuat Method Dinamis di React agar Lebih Fleksibel
Photo by AltumCode / Unsplash

Kenapa Perlu Method yang Dinamis?

Saat membangun aplikasi React, kita sering membuat banyak fungsi (method) untuk menangani berbagai event, seperti menangani input form, menangani klik tombol, atau mengubah state.

Tapi kalau kita buat method satu per satu untuk setiap kasus, kode bisa jadi berantakan dan susah dikelola. Makanya, method dinamis jadi solusi terbaik buat bikin kode lebih fleksibel dan reusable.

Dengan method yang dinamis, kita bisa:
✅ Mengurangi duplikasi kode.
✅ Menangani banyak kasus dengan satu fungsi.
✅ Membuat komponen lebih scalable dan modular.

Di artikel ini, kita bakal bahas cara bikin method dinamis di React supaya komponen kita lebih fleksibel dan efisien!

1. Menangani Banyak Input dengan Satu Method

Biasanya, kalau kita menangani banyak input dalam satu form, kita bikin method terpisah untuk setiap input. Tapi ini bisa jadi nggak efisien.

📌 Contoh kurang efisien:

import React, { useState } from 'react';

function Form() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  return (
    <div>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Nama" />
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
    </div>
  );
}

export default Form;

🚨 Masalah:

  • Kita bikin dua event handler terpisah buat setiap input.
  • Kalau ada lebih banyak input, bakal jadi ribet.

✅ Solusi: Pakai method dinamis untuk menangani banyak input sekaligus.

📌 Contoh Method Dinamis untuk Banyak Input

import React, { useState } from 'react';

function Form() {
  const [form, setForm] = useState({ name: '', email: '' });

  function handleChange(event) {
    const { name, value } = event.target;
    setForm({ ...form, [name]: value });
  }

  return (
    <div>
      <input type="text" name="name" value={form.name} onChange={handleChange} placeholder="Nama" />
      <input type="email" name="email" value={form.email} onChange={handleChange} placeholder="Email" />
    </div>
  );
}

export default Form;

✅ Keuntungan:

  • Cuma pakai satu method (handleChange) buat menangani semua input.
  • Lebih scalable kalau form makin banyak field-nya.

📌 Bagaimana cara kerjanya?

  • event.target.name menentukan field mana yang berubah.
  • event.target.value mengambil nilai terbaru dari input tersebut.
  • setForm({ ...form, [name]: value }) memperbarui state tanpa menghapus field lain.

2. Membuat Method Dinamis untuk Event Handler

Kadang kita butuh banyak fungsi event, misalnya mengubah tema, mengganti bahasa, atau mengatur mode aplikasi. Daripada bikin satu per satu, kita bisa bikin method dinamis yang lebih fleksibel.

📌 Contoh Event Handler Dinamis

import React, { useState } from 'react';

function ThemeSwitcher() {
  const [theme, setTheme] = useState('light');

  function handleEvent(type, value) {
    if (type === 'theme') setTheme(value);
  }

  return (
    <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      <h1>Mode: {theme}</h1>
      <button onClick={() => handleEvent('theme', 'light')}>Light Mode</button>
      <button onClick={() => handleEvent('theme', 'dark')}>Dark Mode</button>
    </div>
  );
}

export default ThemeSwitcher;

✅ Keuntungan:

  • Bisa menangani banyak event dengan satu fungsi.
  • Lebih mudah dikelola saat aplikasi makin kompleks.

📌 Bagaimana cara kerjanya?

  • handleEvent(type, value) menerima jenis event dan nilai yang diubah.
  • Kita bisa menambahkan kondisi lain untuk menangani lebih banyak event dalam satu fungsi.

3. Menggunakan Method Dinamis dengan Props

Dalam komponen reusable, kita bisa membuat method dinamis yang bisa dipakai di berbagai tempat dengan mengirimkan fungsi lewat props.

📌 Contoh Komponen Reusable dengan Method Dinamis

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

function App() {
  function handleClick(action) {
    alert(`Anda memilih: ${action}`);
  }

  return (
    <div>
      <Button label="Simpan" onClick={() => handleClick('Simpan')} />
      <Button label="Hapus" onClick={() => handleClick('Hapus')} />
    </div>
  );
}

export default App;

✅ Keuntungan:

  • Komponen Button bisa digunakan ulang untuk berbagai aksi.
  • Method dinamis handleClick(action) membuat kode lebih clean.

📌 Bagaimana cara kerjanya?

  • Komponen Button menerima fungsi onClick dari props.
  • Saat tombol diklik, method handleClick(action) dipanggil dengan parameter berbeda.

4. Kesimpulan

✅ Gunakan method dinamis untuk menangani banyak input dalam satu fungsi.
✅ Buat event handler dinamis untuk menangani berbagai aksi dalam satu fungsi.
✅ Manfaatkan method dinamis dalam komponen reusable dengan props.
✅ Hindari duplikasi kode dengan teknik yang lebih fleksibel.

Dengan menggunakan method dinamis di React, kita bisa bikin kode yang lebih bersih, efisien, dan mudah dikelola!

Read next