0Pricing
Next.js 15 Fullstack Web Apps · Pelajaran

Merender Daftar, Key, dan UI Kondisional

Render koleksi dinamis dengan map, pilih key yang tepat, dan tampilkan atau sembunyikan UI secara kondisional — fondasi sehari-hari antarmuka React.

Merender Daftar, Key, dan UI Kondisional adalah pelajaran Next.js 15 Fullstack Web Apps gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Next.js 15 Fullstack Web Apps, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack Web Apps mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Rendering Collections

UIs constantly display lists: products, comments, search results. In React you turn an array of data into an array of elements, usually with Array.map.

Mapping an Array

Inside JSX you call map and return one element per item. React renders the resulting array directly.

const items = ['Apple', 'Banana', 'Cherry'];
function List() {
  return (
    <ul>
      {items.map((fruit) => <li>{fruit}</li>)}
    </ul>
  );
}

Why Keys Matter

React needs to track which item is which between renders. A key is a stable, unique identifier per item that lets React reuse, reorder, or remove elements efficiently instead of rebuilding everything.

Adding Keys

Pass a key prop, ideally a stable id from your data — not the array index, which breaks when items move.

{users.map((user) => (
  <li key={user.id}>{user.name}</li>
))}

The Index Key Pitfall

Using the array index as a key seems easy but causes bugs when the list is reordered or filtered: React reuses the wrong DOM node and component state attaches to the wrong item. Prefer a real unique id.

Conditional Rendering with &&

To render something only when a condition is true, use the logical AND operator. If the left side is falsy, nothing renders.

function Inbox({ count }) {
  return (
    <div>
      {count > 0 && <span>You have {count} messages</span>}
    </div>
  );
}

Ternary for Either/Or

When you must show one of two things, use a ternary expression directly in JSX.

function Status({ online }) {
  return <p>{online ? 'Online' : 'Offline'}</p>;
}

Early Returns

For larger branches, return early from the component. This keeps the main JSX clean.

function Profile({ user }) {
  if (!user) return <p>Loading...</p>;
  return <h1>{user.name}</h1>;
}

Beware the Zero Trap

Using && with a number is risky: if the value is 0, React renders the literal 0 instead of nothing. Convert to a boolean first.

{messages.length > 0 && <List />}   // safe
{messages.length && <List />}        // BUG: renders 0

Filtering and Mapping Together

You often filter then map to render a subset. Chain the array methods before returning elements.

{products
  .filter((p) => p.inStock)
  .map((p) => <Card key={p.id} product={p} />)}

Empty States

Always handle the empty case. Show a friendly message when a list has no items rather than rendering a blank area.

{items.length === 0
  ? <p>No results found</p>
  : items.map((i) => <Row key={i.id} {...i} />)}

Quick Check

Test your list-rendering knowledge.

Recap

You learned core rendering patterns:

  • Use map to turn data arrays into elements
  • Give each item a stable, unique key (not the index)
  • Render conditionally with &&, ternaries, or early returns
  • Watch the zero trap and always handle empty states

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Merender Daftar, Key, dan UI Kondisional” gratis?

Ya — teks lengkap “Merender Daftar, Key, dan UI Kondisional” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Next.js 15 Fullstack Web Apps, upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack Web Apps mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Merender Daftar, Key, dan UI Kondisional”?

Render koleksi dinamis dengan map, pilih key yang tepat, dan tampilkan atau sembunyikan UI secara kondisional — fondasi sehari-hari antarmuka React. Kamu berlatih Next.js 15 Fullstack Web Apps dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Next.js 15 Fullstack Web Apps?

Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack Web Apps di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Merender Daftar, Key, dan UI Kondisional” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Next.js 15 Fullstack Web Apps ini?

Ya. Setiap pelajaran Next.js 15 Fullstack Web Apps menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Komponen React dan JSX
  2. Pengelolaan State dengan Hook
  3. Props dan Komunikasi Antarkomponen
  4. Merender Daftar, Key, dan UI Kondisional
← Kembali ke Next.js 15 Fullstack Web Apps