Props (short for *Properties*) are read-only inputs passed from a Parent Component down to a Child Component.

Analogy:

Think of props like arguments passed into a JavaScript function.

Just as function add(a, b) receives arguments a and b to perform work, a React component <ProductCard name="iPhone" price={79999} /> receives props to render dynamic UI content.

• Passing Props (in Parent Component):

You pass props into a component using HTML-like attribute syntax:

<ProductCard name="iPhone 15 Pro" price={79999} category="Mobile" />

• Receiving Props (in Child Component):

The child component receives a single object argument (conventionally named props) containing all passed attributes:

function ProductCard(props) {
  return (
    <div>
      <h3>{props.name}</h3>
      <p>Price: ₹{props.price}</p>
      <span>Category: {props.category}</span>
    </div>
  );
}

Instead of typing props.name, props.price, and props.category repeatedly, modern React developers use ES6 Object Destructuring directly inside the function signature.

// Cleaner & Most Popular Syntax:
function ProductCard({ name, price, category }) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>Price: ₹{price}</p>
      <span>{category}</span>
    </div>
  );
}

You can specify Default Values for props in case the parent component forgets to pass them.

// Assigning Default Values via Destructuring:
function ProductCard({ name, price, category = "General Electronics", isAvailable = true }) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>Price: ₹{price}</p>
      <p>Category: {category}</p>
      <p>Status: {isAvailable ? "In Stock ✅" : "Out of Stock ❌"}</p>
    </div>
  );
}

GOLDEN RULE OF REACT: Props are Immutable (Read-Only). A child component MUST NEVER attempt to mutate or modify its own props!

// ❌ WRONG (Mutating props throws errors or causes unexpected bugs)
function ProductCard(props) {
  props.price = 50000; // NEVER DO THIS!
  return <div>{props.price}</div>;
}

Why are Props Read-Only?

React relies on Pure Functions. A component must behave like a pure function with respect to its props: given the same props, it must always render the exact same UI output.

You can pass ANY JavaScript data type as a prop:

const productObj = { id: 101, brand: "Apple", rating: 4.8 };
const tagsArray = ["5G", "OLED", "A17 Pro"];

<ProductCard 
  name="iPhone 15 Pro"            // String
  price={79999}                    // Number (Wrapped in {})
  isAvailable={true}               // Boolean (Wrapped in {})
  details={productObj}             // Object (Wrapped in {})
  features={tagsArray}             // Array (Wrapped in {})
/>

You can pass Functions as props! This allows a Child Component to communicate back up to its Parent Component.

// Parent Component (App.jsx)
function App() {
  const handleAddToCart = (productName) => {
    alert(`Added ${productName} to Cart!`);
  };

  return <ProductCard name="iPhone 15 Pro" onAddToCart={handleAddToCart} />;
}

// Child Component (ProductCard.jsx)
function ProductCard({ name, onAddToCart }) {
  return (
    <div>
      <h3>{name}</h3>
      <button onClick={() => onAddToCart(name)}>Add to Cart 🛒</button>
    </div>
  );
}

The children prop is a special built-in prop in React that receives whatever JSX elements are placed between the opening and closing tags of a custom component.

Creating Wrapper / Container Components:

// CardWrapper Component
function ContainerCard({ children, title }) {
  return (
    <div style={{ border: "2px solid #2506ad", borderRadius: "16px", padding: "20px" }}>
      <h2 style={{ color: "#2506ad" }}>{title}</h2>
      <div className="card-body">
        {children} {/* Renders inner nested JSX */}
      </div>
    </div>
  );
}

// Usage in App.jsx:
export default function App() {
  return (
    <ContainerCard title="Featured Offer">
      <p>Get 20% discount on all React & Full-Stack development courses!</p>
      <button className="btn-buy">Claim Offer Now</button>
    </ContainerCard>
  );
}

1. Mutating Props: Attempting props.price = 1000.
2. Forgetting Curly Braces for Non-String Types: Writing <Card price="79999" /> passes the string "79999" instead of the number 79999.
3. Misspelling Prop Names: Passing <Card cost={100} /> but reading {price} inside the child component (returns undefined).

Q1: What are Props in React?

*Answer*: Props (properties) are read-only data inputs passed from a parent component to a child component to configure its layout and behavior.

Q2: Can a child component modify its props?

*Answer*: No. Props are strictly immutable. To change data over time, the component should use State or ask the parent component to pass a new prop value.

Q3: What is the children prop?

*Answer*: children is a built-in prop that captures and renders whatever elements are nested inside the opening and closing tags of a component.

Here is a complete, production-ready React component demonstrating all prop types: strings, numbers, objects, arrays, functions, default values, and the children prop: