Membuat Komponen Dinamis di ReactJS: Tutorial Praktis

Pendahuluan

ReactJS adalah salah satu library JavaScript paling populer untuk membangun antarmuka pengguna (UI) yang dinamis dan interaktif. Salah satu fitur utama dari React adalah kemampuannya untuk membuat komponen yang dapat beradaptasi dengan berbagai kondisi. Dalam tutorial ini, kita akan membahas cara membuat komponen dinamis di ReactJS dengan pendekatan praktis.

1. Apa Itu Komponen Dinamis?

Komponen dinamis di React adalah komponen yang dapat berubah berdasarkan data atau interaksi pengguna. Misalnya, komponen yang menampilkan daftar item yang dapat ditambahkan atau dihapus secara dinamis.

2. Persiapan

Sebelum memulai, pastikan Anda memiliki:

• Node.js dan npm (Node Package Manager) terinstal di sistem Anda.

• Sebuah proyek React yang dibuat dengan Create React App atau Vite.

Jika belum memiliki proyek React, Anda bisa membuatnya dengan perintah berikut:

npx create-react-app my-dynamic-component
cd my-dynamic-component
npm start

Atau jika menggunakan Vite:

npm create vite@latest my-dynamic-component --template react
cd my-dynamic-component
npm install
npm run dev

3. Membuat Komponen Dinamis

Mari kita buat komponen dinamis sederhana yang menampilkan daftar item yang dapat ditambah atau dihapus oleh pengguna.

a. Membuat Komponen DynamicList

Buat file baru bernama DynamicList.js di dalam folder src/components dan tambahkan kode berikut:

import { useState } from "react";

function DynamicList() {
  const [items, setItems] = useState([]);
  const [inputValue, setInputValue] = useState("");

  const addItem = () => {
    if (inputValue.trim()) {
      setItems([...items, inputValue]);
      setInputValue("");
    }
  };

  const removeItem = (index) => {
    setItems(items.filter((_, i) => i !== index));
  };

  return (
    <div>
      <h2>Dynamic List</h2>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Tambah item"
      />
      <button onClick={addItem}>Tambah</button>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item} <button onClick={() => removeItem(index)}>Hapus</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default DynamicList;

b. Menggunakan Komponen DynamicList

Sekarang, import dan gunakan DynamicList di App.js:

import DynamicList from "./components/DynamicList";

function App() {
  return (
    <div>
      <h1>Komponen Dinamis di React</h1>
      <DynamicList />
    </div>
  );
}

export default App;

4. Penjelasan Kode

• useState([]) digunakan untuk menyimpan daftar item.

• useState("") digunakan untuk menyimpan nilai input.

• addItem() menambahkan item ke daftar jika input tidak kosong.

• removeItem(index) menghapus item berdasarkan indeksnya.

• map() digunakan untuk merender daftar item secara dinamis.

5. Kesimpulan

Dalam tutorial ini, kita telah membangun sebuah komponen dinamis di ReactJS yang memungkinkan pengguna untuk menambah dan menghapus item dalam daftar. Dengan menggunakan useState, kita dapat mengelola data secara efisien dalam komponen.

Anda bisa mengembangkan komponen ini lebih lanjut, seperti menambahkan animasi saat item ditambahkan atau dihapus menggunakan pustaka seperti Framer Motion.