React Props: Passing Data to Components

Props Passing Data Into Components

What Are Props?

Right now, CourseCard always shows "React Fundamentals". That makes it useless for a second course. Props (short for properties) let you pass different data into a component each time you use it.

Props work exactly like arguments to a function.

Why is it Used?

Props turn a fixed component into a reusable template. One CourseCard component can render a hundred different courses.

Syntax

jsx

// Passing props
<CourseCard title="React Fundamentals" lessons={12} />

// Receiving props
function CourseCard(props) {
  return <h3>{props.title}</h3>;
}

Example

src/components/CourseCard.jsx

jsx

function CourseCard(props) {
  return (
    <div className="course-card">
      <h3>{props.title}</h3>
      <p>{props.lessons} lessons · {props.level}</p>
      <p>Progress: {props.progress}%</p>
    </div>
  );
}

export default CourseCard;

src/App.jsx

jsx

import CourseCard from "./components/CourseCard";

function App() {
  return (
    <div>
      <h1>My Courses</h1>
      <CourseCard title="React Fundamentals" lessons={12} level="Beginner" progress={65} />
      <CourseCard title="Node.js Basics" lessons={18} level="Intermediate" progress={20} />
      <CourseCard title="MongoDB Essentials" lessons={9} level="Beginner" progress={100} />
    </div>
  );
}

export default App;

How It Works

• Props are written like HTML attributes on the component tag.
• Strings use quotes: title="React Fundamentals".
• Numbers, booleans, arrays and objects use curly braces: lessons={12}. Writing lessons="12" would pass the text "12", not the number.
• React collects all props into one object and passes it as the function's first argument, conventionally named props.

Destructuring Props

Writing props. repeatedly gets noisy. Most React code destructures instead:

jsx

function CourseCard({ title, lessons, level, progress }) {
  return (
    <div className="course-card">
      <h3>{title}</h3>
      <p>{lessons} lessons · {level}</p>
      <p>Progress: {progress}%</p>
    </div>
  );
}

This is the same component, written more clearly. You will see this style everywhere.

Default Values

If a prop might not be passed, give it a default:

jsx

function CourseCard({ title, lessons, level = "Beginner", progress = 0 }) {
  // ...
}

Props Are Read-Only

A component must never modify its own props.

jsx

function CourseCard({ progress }) {
  progress = 100;  // Wrong — never do this
  return <p>{progress}%</p>;
}

Data flows one way: parent to child. If a child needs to change something, the parent owns that data and passes down a function to change it. You will do this in Module 5.

Output

Three cards, each showing its own title, lesson count, level, and progress.

Common Mistakes Beginners Make

• Passing numbers as strings: lessons="12" instead of lessons={12}. This breaks arithmetic later.
• Forgetting to destructure but still writing {title}****: if your function signature is function CourseCard(props), you must write props.title.
• Trying to modify props. Props are read-only.
• Prop name mismatches. Passing courseTitle but reading title gives undefined.