Learn › React › Props — Passing Data to Components

Props — Passing Data to Components

⏱ 15 min read

Props (short for "properties") are how you pass data from a parent component to a child component. They flow in ONE direction — from parent to child. You cannot pass props upward.

Passing Props:
<UserCard name="Alice" age={25} isAdmin={true} />
String values use quotes. Everything else (numbers, booleans, arrays, objects, functions) uses curly braces.

Receiving Props:
function UserCard(props) {
return <h2>{props.name}</h2>;
}
// Better — destructure directly:
function UserCard({ name, age, isAdmin }) {
return <h2>{name}</h2>;
}

Default Props — set fallbacks right in the function signature:
function Button({ label = 'Click me', color = 'blue', disabled = false }) { ... }

The children Prop:
Whatever you put between a component's opening and closing tags becomes props.children:
<Card><p>This is the card content</p></Card>
function Card({ children, title }) {
return <div><h2>{title}</h2>{children}</div>;
}

Props are READ-ONLY:
Never modify props inside a component. Props belong to the parent. If you need to change data, use state (Lesson 3).

Prop Types — common patterns:
- string: name="Alice"
- number: age={25}
- boolean: isActive={true} or just isActive (shorthand for isActive={true})
- array: items={[1, 2, 3]}
- object: user={{ name: 'Alice', age: 25 }}
- function: onClick={handleClick}
- JSX: icon={<StarIcon />}

Spreading Props:
const userProps = { name: 'Alice', age: 25 };
<UserCard {...userProps} /> — same as <UserCard name="Alice" age={25} />

Code Example

// Different prop types
function ProductCard({ name, price, rating, tags, isAvailable, onAddToCart }) {
  return (
    <div className={`card ${isAvailable ? 'available' : 'sold-out'}`}>
      <h2>{name}</h2>
      <p>Price: ${price.toFixed(2)}</p>
      <p>Rating: {'⭐'.repeat(Math.round(rating))} ({rating})</p>

      <div className="tags">
        {tags.map(tag => <span key={tag} className="tag">{tag}</span>)}
      </div>

      <button onClick={onAddToCart} disabled={!isAvailable}>
        {isAvailable ? 'Add to Cart' : 'Sold Out'}
      </button>
    </div>
  );
}

// Default props
function Avatar({ src = '/default-avatar.png', size = 48, alt = 'User avatar' }) {
  return <img src={src} width={size} height={size} alt={alt} />;
}

// The children prop — layout/container components
function Section({ title, children, className = '' }) {
  return (
    <section className={`section ${className}`}>
      <h2 className="section-title">{title}</h2>
      <div className="section-body">{children}</div>
    </section>
  );
}

// App — composing it all together
function App() {
  const product = { name: 'Laptop', price: 999.99, rating: 4.5, tags: ['Tech', 'Sale'] };

  function handleAddToCart() {
    alert(`${product.name} added to cart!`);
  }

  return (
    <Section title="Featured Products">
      <ProductCard
        {...product}
        isAvailable={true}
        onAddToCart={handleAddToCart}
      />
      <Avatar size={64} />
    </Section>
  );
}

export default App;

← Hello, React! — Your First Component State & useState — Making Components I →