Membuat Komponen Dinamis di ReactJS

ReactJS adalah salah satu library JavaScript yang paling populer untuk membangun antarmuka pengguna (UI) yang interaktif. Salah satu keunggulan ReactJS adalah konsep komponen. Dengan komponen, kita dapat memecah antarmuka menjadi bagian-bagian kecil yang bisa digunakan kembali.

Namun, membuat komponen dinamis adalah langkah berikutnya yang wajib dikuasai. Komponen dinamis berarti komponen dapat berubah berdasarkan data atau interaksi pengguna. Artikel ini akan memandu Anda membuat komponen dinamis di ReactJS secara sederhana dan praktis.

1. Persiapan Lingkungan

Sebelum mulai, pastikan Anda sudah memiliki:

• Node.js terpasang di komputer

• Editor teks seperti VSCode

• Alat untuk menjalankan React, misalnya Create React App

Membuat proyek baru dengan Create React App:

npx create-react-app belajar-react
cd belajar-react
npm start

2. Mengenal Komponen Dasar

Komponen di React bisa berupa komponen fungsional atau komponen kelas. Sekarang, kebanyakan pengembang menggunakan komponen fungsional dengan React Hooks.

Contoh komponen sederhana:

function Judul() {
  return <h1>Halo, React!</h1>;
}

export default Judul;

3. Membuat Komponen Dinamis Sederhana

Misalnya kita ingin membuat daftar nama yang ditampilkan secara dinamis.

Contoh:

function DaftarNama() {
  const nama = ["Andi", "Budi", "Citra"];

  return (
    <ul>
      {nama.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default DaftarNama;

Penjelasan:

• nama adalah array berisi data.

• map() digunakan untuk membuat elemen <li> untuk setiap nama.

• key harus unik agar React bisa mengenali setiap item.

4. Menambahkan Interaksi

Agar komponen lebih dinamis, tambahkan interaksi pengguna. Contoh, kita membuat tombol untuk menambah nama baru.

import { useState } from "react";

function DaftarNama() {
  const [nama, setNama] = useState(["Andi", "Budi", "Citra"]);

  const tambahNama = () => {
    setNama([...nama, "Nama Baru"]);
  };

  return (
    <div>
      <ul>
        {nama.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={tambahNama}>Tambah Nama</button>
    </div>
  );
}

export default DaftarNama;

Penjelasan:

• useState digunakan untuk membuat state.

• Fungsi tambahNama menambahkan item baru ke array.

• Tombol memicu fungsi tersebut ketika diklik.

5. Komponen Dinamis dengan Props

Selain state, komponen juga bisa menjadi dinamis melalui props. Props adalah data yang dikirim dari komponen induk ke komponen anak.

Contoh komponen induk dan anak:

function Anak(props) {
  return <p>Halo, {props.nama}</p>;
}

function Induk() {
  return (
    <div>
      <Anak nama="Doni" />
      <Anak nama="Sita" />
    </div>
  );
}

export default Induk;

6. Tips Praktis

• Gunakan key yang unik jika membuat list.

• Gunakan useState untuk membuat komponen interaktif.

• Pisahkan komponen menjadi file berbeda agar rapi.

• Coba gunakan props untuk mengirim data.

Kesimpulan

Membuat komponen dinamis di ReactJS tidaklah sulit jika memahami dasar komponen, state, dan props. Dengan latihan, Anda bisa membangun antarmuka pengguna yang fleksibel dan interaktif. Teruslah mencoba, jangan takut salah, karena belajar React akan sangat bermanfaat untuk pengembangan web modern.