React Props

What are Props?

Props (short for properties) are the mechanism for passing data from a parent component to a child component. Props are read-only — a component must never modify its own props. This enforces React's unidirectional data flow.

Think of props like function arguments — you pass them in, the component uses them, but cannot change them.

Props — Passing, Destructuring, Default Values

// Receiving props — three equivalent ways

// 1. Props object
function Button(props) {
    return <button className={props.variant}>{props.label}</button>
}

// 2. Destructuring (preferred)
function Button({ label, variant = 'primary', size = 'md', onClick, disabled = false }) {
    return (
        <button
            className={`btn btn-${variant} btn-${size}`}
            onClick={onClick}
            disabled={disabled}
        >
            {label}
        </button>
    )
}

// 3. Rest props — spread remaining props onto element
function Input({ label, error, ...inputProps }) {
    return (
        <div className="form-group">
            <label>{label}</label>
            <input {...inputProps} className={error ? 'input-error' : ''} />
            {error && <span className="error">{error}</span>}
        </div>
    )
}

// Passing props — parent component
function App() {
    const handleClick = () => alert('Clicked!')

    return (
        <div>
            {/* String props */}
            <Button label="Save" variant="success" />

            {/* Number, boolean, function props */}
            <Button label="Delete" variant="danger" disabled={false} onClick={handleClick} />

            {/* Object/array props */}
            <UserList users={[{id:1, name:'Alice'}, {id:2, name:'Bob'}]} />

            {/* Spread an object as props */}
            <Button {...{ label: 'Cancel', variant: 'secondary' }} />

            {/* Input with rest props */}
            <Input
                label="Email"
                type="email"
                placeholder="Enter email"
                required
                error="Invalid email"
            />
        </div>
    )
}

// PropTypes — runtime type checking (optional but recommended)
import PropTypes from 'prop-types'

function UserCard({ name, age, email, role, isActive }) {
    return (
        <div className={`card ${isActive ? 'active' : ''}`}>
            <h2>{name}</h2>
            <p>Age: {age}</p>
            <p>Email: {email}</p>
            <span className={`badge badge-${role}`}>{role}</span>
        </div>
    )
}

// Define expected prop types
UserCard.propTypes = {
    name:     PropTypes.string.isRequired,
    age:      PropTypes.number.isRequired,
    email:    PropTypes.string.isRequired,
    role:     PropTypes.oneOf(['admin', 'user', 'moderator']),
    isActive: PropTypes.bool,
}

// Default values
UserCard.defaultProps = {
    role:     'user',
    isActive: true,
}

// TypeScript alternative (preferred in modern projects)
// interface UserCardProps {
//     name: string
//     age: number
//     email: string
//     role?: 'admin' | 'user' | 'moderator'
//     isActive?: boolean
// }
// function UserCard({ name, age, email, role = 'user', isActive = true }: UserCardProps) { ... }

Previous Next

React Props

What are Props?

Ready to Level Up Your Skills?