ReactJS #12: Fetch API Part 2 – Menampilkan Data ke Layar (List atau Card)

ReactJS #12: Fetch API Part 2

Menampilkan Data dari API ke Layar
(Buat Jadi List atau Card)

Halo, arsitek tampilan! 🎨

Di artikel #11 kita sudah bisa mengambil data dari API. Sekarang saatnya membuat data itu terlihat cantik di layar. Kita akan belajar mengubah data mentah menjadi daftar (list) yang rapi atau kartu (card) yang menarik. Bayangkan kita punya setumpuk foto, kita bisa menatanya di atas meja (list) atau menempelkannya di papan selancar (card).

📦 ➡️ 🗂️ ➡️ 🖼️
Data mentah → Daftar → Kartu-kartu cantik

📋 Menampilkan Data sebagai List (Daftar)

Bentuk paling sederhana adalah daftar vertikal. Cocok untuk menampilkan judul postingan, komentar, atau todo. Kita akan gunakan data posts dari JSONPlaceholder.

Buat komponen DaftarPostingan.js:

import { useState, useEffect } from 'react'; function DaftarPostingan() { const [posts, setPosts] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetch('https://jsonplaceholder.typicode.com/posts') .then(res => { if (!res.ok) throw new Error('Gagal ambil data'); return res.json(); }) .then(data => { setPosts(data); setLoading(false); }) .catch(err => { setError(err.message); setLoading(false); }); }, []); if (loading) return <p>⏳ Memuat daftar postingan...</p>; if (error) return <p>❌ {error}</p>; return ( <div> <h3>📰 Daftar Postingan</h3> {posts.map(post => ( <div key={post.id} className="list-item"> <strong>{post.title}</strong> <p>{post.body.substring(0, 80)}...</p> </div> ))} </div> ); }

Kita menggunakan posts.map() untuk mengubah setiap item menjadi elemen JSX. Setiap item diberi key unik (biasanya id) agar React bisa melacaknya dengan baik.

🃏 Menampilkan Data sebagai Card (Kartu)

Sekarang kita buat tampilan yang lebih menarik: kartu-kartu yang bisa kita susun berdampingan. Kita akan gunakan data users.

Pertama, buat komponen KartuPengguna.js untuk satu kartu:

function KartuPengguna({ user }) { return ( <div className="card"> <h4>{user.name}</h4> <p>📧 {user.email}</p> <p>🏙️ {user.address.city}</p> <p>🏢 {user.company.name}</p> </div> ); }

Kemudian komponen DaftarPengguna yang mengambil data dan merender banyak kartu:

import { useState, useEffect } from 'react'; import KartuPengguna from './KartuPengguna'; function DaftarPengguna() { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetch('https://jsonplaceholder.typicode.com/users') .then(res => { if (!res.ok) throw new Error('Gagal ambil data'); return res.json(); }) .then(data => { setUsers(data); setLoading(false); }) .catch(err => { setError(err.message); setLoading(false); }); }, []); if (loading) return <p>⏳ Memuat pengguna...</p>; if (error) return <p>❌ {error}</p>; return ( <div> <h3>👥 Profil Pengguna (dalam Kartu)</h3> <div className="card-container"> {users.map(user => ( <KartuPengguna key={user.id} user={user} /> ))} </div> </div> ); }

Perhatikan:

• Kita menggunakan card-container dengan CSS display: flex; flex-wrap: wrap; untuk menyusun kartu secara grid.
• Setiap kartu diberi lebar tetap (250px) agar rapi.
• Komponen KartuPengguna menerima props user dan menampilkan detailnya.

🎨 Menambahkan Sedikit Gaya (CSS)

Kita sudah menggunakan kelas CSS seperti card dan card-container. Di artikel blog, kamu bisa menambahkan CSS di file style.css global atau di dalam komponen dengan style={{}}. Tapi lebih baik pakai CSS terpisah.

Contoh CSS untuk kartu (sudah ada di <style> artikel ini):

.card-container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } .card { background-color: #f9f9f9; border: 4px solid #8bc34a; border-radius: 40px; padding: 20px; width: 250px; box-shadow: 0 10px 0 #558b2f; } .card:hover { transform: translateY(-5px); box-shadow: 0 15px 0 #558b2f; }

🧩 Memisahkan Komponen yang Bertanggung Jawab

Salah satu kehebatan React adalah kita bisa memecah tampilan menjadi komponen-komponen kecil. Misalnya:

• DaftarPengguna – bertugas mengambil data dan mengatur tata letak.
• KartuPengguna – bertugas menampilkan satu pengguna.

Dengan pemisahan ini, kode lebih rapi dan mudah diperbaiki. Jika ingin mengubah tampilan kartu, kita cukup edit KartuPengguna, tanpa mengganggu bagian pengambilan data.

🧪 Latihan: Galeri Foto Album

Buat komponen GaleriFoto yang mengambil data dari https://jsonplaceholder.typicode.com/photos?_limit=10 (batasi 10 foto). Tampilkan dalam bentuk kartu yang berisi:

• Gambar kecil (thumbnail) dari properti thumbnailUrl.
• Judul foto.
• Beri efek hover yang keren.

Petunjuk: gunakan <img src={photo.thumbnailUrl} alt={photo.title} />.

Kerangka (coba selesaikan sendiri):

import { useState, useEffect } from 'react'; function GaleriFoto() { const [photos, setPhotos] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { fetch('https://jsonplaceholder.typicode.com/photos?_limit=10') .then(res => res.json()) .then(data => { setPhotos(data); setLoading(false); }); }, []); if (loading) return <p>⏳ Memuat foto...</p>; return ( <div> <h3>📸 Galeri Foto</h3> <div className="card-container"> {photos.map(photo => ( <div key={photo.id} className="card" style={{ textAlign: 'center' }}> <img src={photo.thumbnailUrl} alt={photo.title} style={{ borderRadius: '30px' }} /> <p>{photo.title.substring(0, 30)}...</p> </div> ))} </div> </div> ); }

Kamu bisa mengganti _limit=10 dengan angka lain untuk mengambil lebih banyak foto.

💡 Tips: JSONPlaceholder menyediakan berbagai sumber data: /posts, /comments, /albums, /photos, /todos, /users. Coba eksplorasi sendiri!

🚀 Menampilkan Data yang Lebih Kompleks

Kadang data API berisi objek bersarang. Misalnya, dari /users, alamat (address) adalah objek. Kita bisa mengaksesnya seperti user.address.city. Pastikan data yang diharapkan ada (handle jika properti tidak ada).

Contoh aman:

<p>🏙️ {user.address?.city || 'Kota tidak diketahui'}</p>

Operator ?. (optional chaining) mencegah error jika address tidak ada.

📌 Kesimpulan

• Gunakan .map() untuk merender kumpulan data menjadi elemen JSX.
• Selalu beri key unik pada setiap elemen hasil map.
• Pisahkan tampilan menjadi komponen kecil (misal Card) agar kode rapi dan bisa dipakai ulang.
• Atur tata letak dengan CSS (flexbox/grid) untuk membuat list atau grid card.
• Tangani data yang mungkin kosong dengan optional chaining atau nilai default.

Di artikel selanjutnya kita akan belajar menangani loading dan error dengan lebih baik serta membuat tombol "Muat Lebih Banyak". Sampai jumpa!

Lanjut ke ReactJS #13: Fetch API Part 3 ▶

✨ Data yang tadinya mentah, kini jadi hidangan lezat di layar! ✨