Props in React

Analogy categoryAnalogies

Introduction

Props (short for "properties") are the mechanism React uses to pass data from a parent component to a child component. Props are read-only: a child component must never modify the props it receives. This immutability is central to React's one-way (unidirectional) data flow, where data flows down through props and events flow up through callback functions passed as props.

🏏

Cricket analogy: The captain sets the batting order and hands it to each batsman as a read-only instruction — no batsman can rewrite the order sheet, they can only request a change by signaling the captain, who updates it himself.

Syntax

jsx

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

function App() {
  return <Greeting name="Asha" age={28} />;
}

Explanation

Props are passed to a component the same way attributes are passed to an HTML element. Inside the function component, they arrive as a single object argument, which is commonly destructured (as shown above) for cleaner access. Any JavaScript value can be a prop: strings, numbers, booleans, arrays, objects, or even functions and other React elements (via the special children prop).

🏏

Cricket analogy: Selecting a player for the XI is like passing attributes — role, batting order, is-captain — bundled into one selection slip that the player receives and reads off, including special roles like "wicketkeeper".

Example

jsx

function Button({ label, onClick, disabled = false }) {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
}

function App() {
  const handleSave = () => console.log('Saved!');

  return (
    <Button label="Save" onClick={handleSave} />
  );
}

Output

The App component renders a button labeled "Save". When clicked, it calls the handleSave function passed down via the onClick prop, logging "Saved!" to the console. Notice that Button never modifies label, onClick, or disabled directly — it only reads them, keeping data flow predictable and traceable back to the parent.

🏏

Cricket analogy: The captain hands the bowler a fixed field placement, over count, and a "last over" flag; the bowler bowls according to it but never rewrites the field placement himself, keeping the captain's plan traceable.

Key Takeaways

Props flow one-way: from parent to child, never the reverse.
Props are read-only — a component must never mutate its own props.
Default values can be assigned using default parameters in destructuring.
Functions can be passed as props to let children communicate back to parents (props down, events up).
The special children prop lets a component render whatever JSX is nested inside it.