Menampilkan Data & Daftar

Data → tampilan

Hampir semua situs menampilkan daftar: produk, artikel, kursus. Caranya: simpan data dalam array, lalu ubah tiap item menjadi elemen dengan map().

const kursus = [
  { id: 1, judul: "HTML Dasar" },
  { id: 2, judul: "JavaScript Dasar" },
];

export default function Page() {
  return (
    <ul>
      {kursus.map((k) => (
        <li key={k.id}>{k.judul}</li>
      ))}
    </ul>
  );
}

Wajib punya key

key adalah nama unik tiap item (biasanya id). React memakainya untuk mengenali item mana yang berubah.

Mengambil data dari internet

Di Server Component, halaman boleh dibuat async lalu mengambil data langsung:

export default async function Page() {
  const res = await fetch("https://api.example.com/kursus");
  const kursus = await res.json();
  return (
    <ul>
      {kursus.map((k) => <li key={k.id}>{k.judul}</li>)}
    </ul>
  );
}

await berarti "tunggu sampai datanya tiba". Tidak perlu useEffect seperti React biasa. Bentuk menampilkannya sama persis dengan contoh pertama.