Props (short for properties) allow parent components to pass data and callbacks down to child components.
1. Passing and Destructuring Props
⊞Code Example
interface CourseCardProps {
title: string;
lessonsCount: number;
isPopular?: boolean;
}
export function CourseCard({ title, lessonsCount, isPopular = false }: CourseCardProps) {
return (
<div className="p-5 bg-slate-900 border border-slate-800 rounded-2xl">
<div className="flex justify-between items-center mb-2">
<h3 className="font-bold text-white text-base">{title}</h3>
{isPopular && (
<span className="text-[10px] bg-emerald-500/20 text-emerald-400 font-extrabold px-2 py-0.5 rounded-full">
POPULAR
</span>
)}
</div>
<p className="text-xs text-slate-400">📚 {lessonsCount} Lessons</p>
</div>
);
}