← React9 / 78

Props: Mengoper Data & Typing dengan TS

Props adalah data masukan untuk komponen. Pola standar industri adalah langsung menggunakan destructuring dan interface TypeScript.

👀 Contoh dulu

interface UserProps { name: string; }
function UserCard({ name }: UserProps) {
  return <h3>{name}</h3>;
}

Hasilnya: <h3>Budi</h3>

💡 Props bersifat Read-Only! Jangan pernah mengubah nilai props secara langsung.

📝 Sekarang giliranmu

Buat interface BadgeProps { text: string } dan komponen function Badge({ text }: BadgeProps) yang mengembalikan <span>{text}</span>.

Preview
← SebelumnyaBerikutnya →