React — Props

What are Props?

Props (short for properties) are used to pass data from parent to child components. They are read-only.

Basic Props

function Welcome({ name, age }) {
    return (
        <div>
            <h1>Hello, {name}!</h1>
            <p>You are {age} years old.</p>
        </div>
    );
}

// Usage
<Welcome name="John" age={25} />

Props as Objects

function UserCard({ user }) {
    return (
        <div className="card">
            <h3>{user.name}</h3>
            <p>{user.email}</p>
        </div>
    );
}

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

Children Props

function Card({ title, children }) {
    return (
        <div className="card">
            <h3>{title}</h3>
            <div className="card-body">
                {children}
            </div>
        </div>
    );
}

// Usage
<Card title="My Card">
    <p>This is the card content.</p>
</Card>

Default Props

function Button({ text = "Click me", variant = "primary" }) {
    return (
        <button className={`btn btn-${variant}`}>
            {text}
        </button>
    );
}

// Usage
<Button /> // text="Click me", variant="primary"
<Button text="Submit" variant="success" />

Props Examples

// Product card
function ProductCard({ product }) {
    return (
        <div className="product-card">
            <img src={product.image} alt={product.name} />
            <h3>{product.name}</h3>
            <p>${product.price}</p>
            <button>Add to Cart</button>
        </div>
    );
}

// User list
function UserList({ users }) {
    return (
        <ul>
            {users.map(user => (
                <li key={user.id}>{user.name}</li>
            ))}
        </ul>
    );
}

// Usage
function App() {
    const products = [
        { id: 1, name: "Laptop", price: 999, image: "laptop.jpg" },
        { id: 2, name: "Phone", price: 699, image: "phone.jpg" }
    ];

    return (
        <div>
            {products.map(product => (
                <ProductCard key={product.id} product={product} />
            ))}
        </div>
    );
}

Mini Practice

Write React code that:

1. Passes props to a component
2. Uses children props
3. Sets default prop values
4. Passes arrays and objects as props

Up Next

Next: Learn about State.