React10 / 78

children — Komponen Pembungkus

Prop children adalah fitur bawaan React yang memungkinkan komponen membungkus elemen JSX lain di dalamnya.

👀 Contoh dulu

interface ModalProps { children: React.ReactNode; }
function Modal({ children }: ModalProps) {
  return <div className="modal">{children}</div>;
}

Hasilnya: Elemen di dalam <Modal><p>Isi Modal</p></Modal> akan dirender pada prop children.

💡 Tipe React.ReactNode digunakan untuk mengetik prop children di TypeScript.

📝 Sekarang giliranmu

Buat interface CardProps { children: React.ReactNode } dan komponen function Card({ children }: CardProps) yang mengembalikan <div>{children}</div>.

Preview