Default Props & Destructuring Pattern

Memberikan nilai bawaan (default value) pada props dapat dilakukan langsung di dalam sintaks destructuring parameter.

👀 Contoh dulu

function Button({ color = "blue", text }: ButtonProps) {
  return <button className={color}>{text}</button>;
}

Hasilnya: Menggunakan warna 'blue' jika prop color tidak diberikan.

💡 Pola default parameter JS ini menggantikan defaultProps lama.

📝 Sekarang giliranmu

Tulis parameter fungsi komponen function Avatar({ size = 40 }: AvatarProps).

Preview