Props

Introduction

So far your components have mostly displayed fixed, hardcoded content. But real components need to display different data depending on where they are used — a ProductCard should show a different product each time, and a Greeting should greet a different person. Props solve exactly this problem.

Props are how data flows into a component from the outside, making components truly reusable and configurable. This lesson covers everything you need to know about passing, reading, and safely working with props.

What Are Props?

Props (short for "properties") are data passed from a parent component to a child component. You can think of props as very similar to arguments passed into a regular JavaScript function — the parent decides what values to send in, and the child uses those values to decide what to render.

Passing and Reading Props

You pass props to a component the same way you set attributes on an HTML element — as name="value" pairs in JSX. Inside the component, all the props arrive bundled together as a single object, usually named props.

function App() {
  return (
    <div>
      <Greeting name="Amol" role="Student" />
      <Greeting name="Priya" role="Instructor" />
    </div>
  );
}

function Greeting(props) {
  return (
    <h2>
      Hello, {props.name}! You are logged in as {props.role}.
    </h2>
  );
}

Hello, Amol! You are logged in as Student.
Hello, Priya! You are logged in as Instructor.

Destructuring Props

Writing props.name and props.role repeatedly gets verbose. Most React code destructures the needed values directly in the function's parameter list, which is both shorter and clearer about exactly which props a component expects.

function Greeting({ name, role }) {
  return (
    <h2>
      Hello, {name}! You are logged in as {role}.
    </h2>
  );
}

Default Prop Values

Sometimes a prop is optional, and you want the component to fall back to a sensible value if it is not provided. JavaScript's default parameter syntax works perfectly for this when destructuring props.

function Greeting({ name, role = 'Guest' }) {
  return (
    <h2>
      Hello, {name}! You are logged in as {role}.
    </h2>
  );
}

// Usage — no role passed, so it defaults to "Guest"
<Greeting name="Sam" />

Hello, Sam! You are logged in as Guest.

The default value is only used when the prop is undefined — if a parent explicitly passes role="" or role={null}, the default will not kick in for those values.

The Special children Prop

Every component automatically receives a special prop called children, containing whatever JSX was nested between its opening and closing tags. This is what lets you build wrapper components like cards, layouts, or modals that display whatever content is placed inside them.

function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <h3>Special Offer</h3>
      <p>Get 20% off this week only.</p>
    </Card>
  );
}

Special Offer
Get 20% off this week only.

Props Are Read-Only

React has a strict rule: a component must never modify its own props. Props represent data owned by the parent, and changing them inside the child would break React's ability to predictably track and update the UI. If a component needs to change data over time, it should use state instead — covered in the next lesson.

function Greeting({ name }) {
  const displayName = name.toUpperCase();
  return <h2>Hello, {displayName}!</h2>;
}

function Greeting(props) {
  props.name = props.name.toUpperCase(); // never do this
  return <h2>Hello, {props.name}!</h2>;
}

Example: A Reusable Card Component

Putting several of these ideas together, here is a reusable ProfileCard component using destructuring, a default value, and the children prop.

function ProfileCard({ name, title = 'Member', children }) {
  return (
    <div className="profile-card">
      <h3>{name}</h3>
      <p>{title}</p>
      {children}
    </div>
  );
}

function App() {
  return (
    <ProfileCard name="Amol Chipte" title="Course Author">
      <button>View Profile</button>
    </ProfileCard>
  );
}

Amol Chipte
Course Author
[View Profile button]

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Props are the mechanism that makes components configurable and reusable, letting a parent pass data down into a child much like arguments passed into a function. Destructuring, default values, and the children prop all make working with props cleaner and more expressive.

In this lesson, you learned what props are, how to pass and read them, how to destructure and default them, how the children prop works, and why props must always stay read-only. Next, you will learn about state — the data a component manages internally that can change over time.