Component Composition & children

Penjelasan

props.children adalah props khusus yang otomatis berisi apa pun yang dituliskan DI ANTARA tag pembuka dan penutup sebuah komponen — dipakai untuk membuat komponen "pembungkus" generik (mis. Card, Modal) yang isinya fleksibel, ditentukan oleh siapa pun yang memakainya.

Contoh Konsep

function Kartu({ children }) {
    return <div className="kartu-pembungkus">{children}</div>;
}

function App() {
    return (
        <Kartu>
            <h2>Judul Kartu</h2>
            <p>Isi kartu bisa apa saja, ditentukan di sini.</p>
        </Kartu>
    );
}

Praktikum

Buat komponen Panel yang menerima props children dan judul, menampilkan judul di dalam <h3> lalu children di bawahnya di dalam <div>. Pakai komponen Panel itu dua kali dengan judul dan isi berbeda.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Component composition lewat children sering jadi alternatif lebih bersih dibanding banyak props boolean (mis. showHeader, showFooter) untuk mengatur tampilan komponen — biarkan pemakai komponen menentukan isinya lewat children, bukan lewat sederet flag konfigurasi.