Props: Passing Data Into Components

function CourseCard({ title, lessonCount, level }) {n    return (n        <div className="card">n            <span className="card__tag">{level}</span>n            <h3>{title}</h3>n            <p>{lessonCount} lessons</p>n        </div>n    );n}nnfunction App() {n    return (n        <CourseCard title="React" lessonCount={7} level="Basic to Pro" />n    );n}

Props (short for “properties”) are how data flows into a component from its parent — title, lessonCount, and level above are all props, passed the same way HTML attributes are written. This makes CourseCard genuinely reusable: the same component renders differently depending on what it’s given, exactly like the course-card template on this very site being reused for every course with different content each time.

Props are read-only

A component must never modify its own props directly — data flows one way, from parent to child. If a component needs to change over time in response to user interaction, that is what state (covered in the next lesson) is for, not props.

The children prop

function Card({ children }) {n    return <div className="card">{children}</div>;n}nnfunction App() {n    return (n        <Card>n            <h3>Custom content</h3>n            <p>Anything placed between the tags becomes children</p>n        </Card>n    );n}

children is a special prop containing whatever was placed between a component’s opening and closing tags — a common, powerful pattern for building generic wrapper components like a reusable card, modal, or layout shell.

Default prop values

function CourseCard({ title, level = "Beginner" }) {n    return <h3>{title} ({level})</h3>;n}

Exactly like default function parameters from the JavaScript course, a prop can have a fallback value used whenever the parent doesn’t explicitly pass one.