📤 Passing Props to Components — Sending Data Down

Passing props is as simple as adding attributes to your component tags, just like HTML attributes. You write `<ComponentName propName="value" />` and the component receives that data.

🎯 Basic Prop Passing

To pass a prop, write it as an attribute on the component tag. The parent sends data and the child receives it:

function App() {
  return <Greeting name="Alice" />;
}

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

<details>

<summary>📚 More Examples</summary>

// Multiple props
function UserCard({ name, age, city }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Age: {age}</p>
      <p>City: {city}</p>
    </div>
  );
}

<UserCard name="Alice" age={28} city="NYC" />

</details>

💡 Passing Different Data Types

You can pass strings (with quotes), or any JavaScript value (with curly braces). When using curly braces, you're passing actual JavaScript—not strings.

function Product({ name, price, inStock, tags }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>${price}</p>
      <p>{inStock ? "Available" : "Sold out"}</p>
      <p>Tags: {tags.join(", ")}</p>
    </div>
  );
}

// Passing different types
<Product
  name="Laptop"              // String (quotes optional)
  price={999}                // Number (needs braces)
  inStock={true}             // Boolean (needs braces)
  tags={["tech", "new"]}     // Array (needs braces)
/>

<details>

<summary>📚 More Examples</summary>

// Objects as props
function Profile({ user }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

<Profile user={{ name: "John", email: "john@example.com" }} />

// Common mistake: forgetting braces
<Timer seconds="30" />      // ❌ Wrong: "30" is a string
<Timer seconds={30} />      // ✅ Right: 30 is a number

</details>

🎨 Real-World Example: Product Listings

Instead of creating many similar components, pass props to create flexible ones:

function StorePage() {
  return (
    <div>
      <ProductCard name="Laptop" price={999} inStock={true} />
      <ProductCard name="Mouse" price={25} inStock={false} />
      <ProductCard name="Keyboard" price={75} inStock={true} />
    </div>
  );
}

function ProductCard({ name, price, inStock }) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>${price}</p>
      <p>{inStock ? "In Stock" : "Out of Stock"}</p>
    </div>
  );
}

🔑 Key Takeaways

• ✅ Pass props like HTML attributes: `<Component prop="value" />`

• ✅ Use curly braces for JavaScript values: `prop={value}`

• ✅ You can pass any type: strings, numbers, booleans, objects, arrays

• ✅ Props flow only from parent to child

• ✅ Child components can't pass data back to parent

Ready to practice? Challenges | Next: Reading Props in Components