Props — React Tutorial

Props

⚛️ React 18+ 🟢 Chapter 8 of 39 📂 Phase 04: Props and Rendering 📅 2026 Edition

📌 Covered in this chapter: Passing Props · Reading Props · Destructuring · Multiple Prop Types · children Prop · Default Values · Props Are Read-Only

Props (short for "properties") are how data flows from a parent component into a child component — they're the mechanism that turns a static component into a flexible, reusable one.

1Passing and Reading Props

💻 Example 1: Basic Props

JSX▶ Run in Compiler

function Welcome({ name }) {
  return <h2>Welcome, {name}</h2>;
}

function App() {
  return <Welcome name="Ravi" />;
}

🔍 Line-by-Line Breakdown:

<Welcome name="Ravi" />: passes a prop called name with the value "Ravi"
function Welcome({ name }): React always passes exactly one argument — a single props object — and { name } destructures it directly in the function parameters

2Multiple Props and Prop Types

function ProductCard({ title, price, inStock, tags }) {
  return (
    <div>
      <h3>{title}</h3>
      <p>₹{price}</p>
      <p>{inStock ? "In Stock" : "Sold Out"}</p>
    </div>
  );
}

<ProductCard
  title="Wireless Mouse"
  price={799}
  inStock={true}
  tags={["electronics", "sale"]}
/>

Props can be strings, numbers, booleans, arrays, objects, or even functions — anything JavaScript can hold. Note that non-string values (numbers, booleans, objects) must be wrapped in curly braces.

3The children Prop and Default Values

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

<Card>
  <h3>Anything goes here</h3>
  <p>This is the children prop.</p>
</Card>

// Default values
function Welcome({ name = "Guest" }) {
  return <h2>Welcome, {name}</h2>;
}

children is a special, automatically-provided prop containing whatever JSX was nested between a component's opening and closing tags — it's what makes wrapper components like modals and cards possible.

⚠️ Trying to Modify a Prop Inside a Component

Props are strictly read-only — writing name = "New Value" inside a component that received name as a prop either does nothing or throws an error. If a value needs to change over time, it belongs in state (Chapter 12), not props.

💻 Hands-on Interactive Practice Challenge

Create a UserCard component accepting name, role, and an optional isOnline prop with a default value of false, and render it twice with different data.

React Practice Challenge ▶ Run in Compiler

function UserCard({ name, role, isOnline = false }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{role}</p>
      <p>{isOnline ? "🟢 Online" : "⚫ Offline"}</p>
    </div>
  );
}

function App() {
  return (
    <>
      <UserCard name="Meera" role="Designer" isOnline={true} />
      <UserCard name="Dev" role="Developer" />
    </>
  );
}

Run This Challenge in Online JS IDE →

❓ Frequently Asked Questions (FAQ)

Q Can I pass a function as a prop?

Yes — this is extremely common, especially for event handlers passed from parent to child, and is covered fully in Chapter 17 (Child-to-Parent Communication).

Q What happens if I don't pass a required prop?

The component receives undefined for that prop and tries to render it as such, usually resulting in missing or blank content rather than a crash. Using default values or TypeScript (in later, more advanced projects) helps catch this earlier.

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy & tested on React 18+ · Last updated August 2026