Cara Menampilkan data dinamis di React

Menampilkan data dinamis di React berarti Anda merender komponen atau elemen HTML berdasarkan data yang diperoleh dari sumber eksternal, seperti API, atau berdasarkan perubahan state dalam aplikasi. Berikut adalah contoh sederhana bagaimana cara menampilkan data dinamis menggunakan React.

Contoh Menampilkan Data Dinamis di React

Misalkan kita ingin menampilkan daftar artikel yang diambil dari API dan menampilkannya secara dinamis di halaman.

  1. Buat Proyek React (Opsional)

    Jika Anda belum memiliki proyek React, Anda bisa membuatnya menggunakan Create React App:

    npx create-react-app dynamic-data-app
cd dynamic-data-app

  2. Struktur Proyek

    Pastikan struktur proyek Anda terlihat seperti ini:

    src/
├── App.js
├── index.js
└── index.css

  3. Fetching Data dari API

    Di sini kita akan menggunakan fetch untuk mendapatkan data dari API dan menampilkannya secara dinamis.

    File src/App.js:

    import React, { useState, useEffect } from 'react';

function App() {
  const [articles, setArticles] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Fetch data dari API
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => {
        setArticles(data);  // Simpan data di state
        setLoading(false);  // Set loading state ke false
      })
      .catch(error => {
        console.error("Error fetching data: ", error);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <p>Loading...</p>;  // Tampilkan loading saat data sedang di-fetch
  }

  return (
    <div className="container">
      <h1>Daftar Artikel</h1>
      <ul>
        {articles.map(article => (
          <li key={article.id}>
            <h2>{article.title}</h2>
            <p>{article.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

  4. Penjelasan Kode:

    • State Management: Kita menggunakan useState untuk menyimpan artikel (articles) dan status loading (loading).

    • Fetching Data: useEffect digunakan untuk melakukan fetching data saat komponen pertama kali dirender. Data yang diterima disimpan dalam state articles.

    • Rendering Dinamis: Data yang disimpan di articles kemudian dirender secara dinamis dalam list <ul>. Setiap artikel ditampilkan dalam elemen <li> dengan map() yang diiterasikan melalui array articles.

  5. Jalankan Aplikasi

    Pastikan Anda menjalankan aplikasi untuk melihat hasilnya:

    npm start

  6. Hasilnya

    Aplikasi akan menampilkan daftar artikel yang diambil dari API secara dinamis. Jika Anda mengubah data di API atau menambahkan logika untuk memanipulasi data, tampilan di aplikasi akan berubah sesuai dengan data yang diperoleh atau dimodifikasi.

Contoh Dinamis Berdasarkan Input Pengguna

Anda juga dapat menampilkan data secara dinamis berdasarkan input pengguna. Berikut adalah contoh bagaimana input dari pengguna dapat mempengaruhi data yang ditampilkan:

File src/App.js:

import React, { useState } from 'react';

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

  const handleAddItem = () => {
    setItems([...items, inputValue]); // Menambahkan item baru ke daftar
    setInputValue(""); // Reset input
  };

  return (
    <div className="container">
      <h1>Daftar Item</h1>
      <input 
        type="text" 
        value={inputValue} 
        onChange={(e) => setInputValue(e.target.value)} 
        placeholder="Masukkan item baru" 
      />
      <button onClick={handleAddItem}>Tambah Item</button>
      
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Penjelasan Kode:

  • State Management: items menyimpan daftar item yang akan ditampilkan, dan inputValue menyimpan nilai dari input pengguna.

  • Menambahkan Data: Saat pengguna mengklik tombol "Tambah Item", item baru ditambahkan ke dalam array items.

  • Rendering Dinamis: Setiap item dalam items dirender dalam elemen <li>.

Sumber

Dengan pendekatan ini, Anda dapat membuat tampilan yang dinamis dan responsif berdasarkan data yang diambil dari API atau berdasarkan interaksi pengguna.

PreviousCara Fetching data dari API di ReactNextError handling dalam pengambilan data

Last updated