Props

Props are how a parent component passes data to a child component. They work like function arguments and are read-only: the child should never change them.

type CardProps = { title: string; count: number };

function Card({ title, count }: CardProps) {
  return (
    <div>
      <h2>{title}</h2>
      <p>{count} lessons</p>
    </div>
  )
}

// Parent passes props
<Card title="React" count={8} />
<Card title="Next.js" count={5} />