Props

Props (properties) adalah mekanisme untuk mengirim data dari parent component ke child component di framework seperti React dan Vue. Props bersifat read-only — child component tidak boleh mengubah props-nya. Jika child perlu mengubah data, gunakan callback function (event) yang dikirim sebagai prop. Props bisa berupa tipe data apa pun: string, number, boolean, array, object, function, bahkan component lain. TypeScript membuat props lebih aman dengan mendefinisikan interface/tipe untuk setiap component. Props spreading ({…props}) memungkinkan meneruskan semua props ke child element. Default props bisa diberikan dengan destructuring: function Button({ size = ‘md’ }).

Contoh Kode

// Definisi component dengan props (TypeScript)
interface CardProps {
  title: string;
  description: string;
  imageUrl?: string;     // Optional
  onAction: () => void;  // Callback
  tags: string[];
}

function Card({ title, description, imageUrl, onAction, tags }: CardProps) {
  return (
    <div className="card">
      {imageUrl && <img src={imageUrl} alt={title} />}
      <h3>{title}</h3>
      <p>{description}</p>
      <div className="tags">
        {tags.map(tag => <span key={tag}>{tag}</span>)}
      </div>
      <button onClick={onAction}>Lihat Detail</button>
    </div>
  );
}