React

1. What are Props?

Props (short for properties) are the mechanism by which parent components pass data and configuration down to child components. Just as you pass arguments to a regular JavaScript function to customize its output, you pass props to a React component to customize its rendered UI.

Function Arguments vs React Props

// 1. Standard JavaScript Function:
function buildUserCard(name, role, rating) {
    return `${name} - ${role} (${rating}★)`;
}
buildUserCard("Anshuman", "Architect", 5);

// 2. React Functional Component with Props:
function UserCard(props) {
    return (
        <div className="user-card">
            <h3>{props.name}</h3>
            <p>Role: {props.role}</p>
            <span>Rating: {props.rating}★</span>
        </div>
    );
}

// Render with custom props:
<UserCard name="Anshuman" role="Architect" rating={5} />

2. Passing & Destructuring Props

In modern React, developers almost always destructure props directly inside the function parameter signature. This makes the code significantly cleaner and allows setting convenient default values.

function Button({ label, variant = "primary", disabled = false }) {
    return (
        <button className={`btn btn-${variant}`} disabled={disabled}>
            {label}
        </button>
    );
}

function CustomInput({ label, ...restProps }) {
    return (
        <div className="input-group">
            <label>{label}</label>
            <input {...restProps} />
        </div>
    );
}
// Usage: <CustomInput label="Age" type="number" min="18" />

3. Props Immutability (Pure Functions Rule)

A fundamental rule of React is that Props are strictly Read-Only and Immutable. A component must never modify its own props.

// ❌ NEVER DO THIS: Direct prop mutation (Breaks React re-render tracking!)
function CartSummary(props) {
    props.total = props.total + 10; // 💥 TypeError: Cannot assign to read-only property!
    return <div>Total: ${props.total}</div>;
}

// ✅ CORRECT: Compute derived local values or use state
function CartSummary({ total, shippingCost = 10 }) {
    const grandTotal = total + shippingCost; // Pure derived calculation
    return <div>Grand Total: ${grandTotal}</div>;
}

4. Child-to-Parent Communication (Callback Functions)

Since data in React only flows downward (parent to child), how does a child notify a parent when a button is clicked or an input changes? The Parent passes a callback function as a prop down to the child!

Real-World Code Implementation

// 1. CHILD COMPONENT: Receives function via props and triggers it on user event
function SearchFilter({ onSearchChange }) {
    return (
        <input 
            type="text"
            placeholder="Type to filter..."
            onChange={(e) => onSearchChange(e.target.value)} // Sending data UP to parent
        />
    );
}

// 2. PARENT COMPONENT: Holds state and passes handler down
function ProductCatalog() {
    const [query, setQuery] = React.useState("");

    function handleFilter(searchText) {
        console.log("Parent received updated query:", searchText);
        setQuery(searchText);
    }

    return (
        <div className="catalog-wrapper">
            <h2>Catalog Search</h2>
            <SearchFilter onSearchChange={handleFilter} />
            <p>Active Filter: <strong>{query}</strong></p>
        </div>
    );
}

5. Top Interview Questions & Common Pitfalls

6. Hands-On Practice Challenges

Master component communication and props handling with these interactive exercises. Click "Solve Challenge" to open the code editor!