Children, Nilai Bawaan & Komposisi

props.children

Selain atribut, komponen bisa menerima isi yang ditaruh di antara tag pembuka dan penutup. Isi itu masuk sebagai prop spesial bernama children:

function Panel({ judul, children }) {
  return (
    <section className="panel">
      <h3>{judul}</h3>
      <div className="isi">{children}</div>
    </section>
  );
}

<Panel judul="Pengumuman">
  <p>Kelas dimulai pukul 09.00.</p>
  <button>Daftar</button>
</Panel>

children bisa berupa teks, elemen, bahkan komponen lain. Ini kunci komposisi: membuat "kerangka" yang isinya ditentukan pemakai.

Contoh pembungkus umum

• Card, Modal, Layout, Container, Button dengan ikon.
• Komponen yang hanya mengatur tampilan di sekitar isinya.

Nilai bawaan (default props)

Beri nilai default lewat destructuring:

function Panel({ judul, warna = "hijau", children }) {
  return (
    <section className={`panel panel-${warna}`}>
      ...
    </section>
  );
}

<Panel judul="A">...</Panel>                 // warna hijau
<Panel judul="B" warna="merah">...</Panel>   // warna merah

Template literal ` panel panel-${warna} ` menyusun nama class secara dinamis.

Komposisi lebih baik daripada pewarisan

React tidak memakai pewarisan class antar komponen. Untuk variasi, gunakan:

• props untuk mengatur perilaku (warna, ukuran),
• children untuk mengisi konten,
• komponen khusus yang memakai komponen umum (TombolHapus memakai Tombol).

Banyak "slot"

Jika butuh beberapa area isi, kirim JSX sebagai props:

<Layout
  sidebar={<Menu />}
  konten={<Beranda />}
/>

Kapan memakai children vs props biasa?

• Konten bebas yang berupa elemen → children.
• Data sederhana (teks, angka, flag) → props biasa.