Props

Relax. We'll talk through this in plain words — no textbook voice.

Props are how a parent component passes data down to a child component. If you write a component like a template and pass it different props, you can easily change things like card title, price, image, and button text.

jsx

function CourseCard({ title, level, lessons }) {
  return (
    <article className="course-card">
      <h2>{title}</h2>
      <p>Level: {level}</p>
      <p>{lessons} lessons included</p>
    </article>
  );
}

function App() {
  return (
    <CourseCard
      title="React Foundation"
      level="Starter"
      lessons={18}
    />
  );
}

`CourseCard` accepts three props: `title`, `level`, and `lessons`. The parent, `App`, passes in the values as attributes.

You should see

A card will appear showing the course title, level, and lesson count.

Info

Pass string props with quotes, and pass number, boolean, object, and array props inside `{}`.

Easy traps

Writing `lessons=18` can cause issues with string handling. If you want to pass a number, write `lessons={18}`.