Props & Data Flow

Props & Data Flow

In React, components communicate via Props (short for properties). Props allow parent components to pass data down to child components.

Passing and Receiving Props

Props are passed to components using HTML-like attributes and received as a single object parameter inside the child component function.

// Parent Component passing props
function App() {
  return (
    <div className="app">
      <Greeting name="Alice" age={28} isAdmin={true} />
      <Greeting name="Bob" age={34} isAdmin={false} />
    </div>
  );
}

// Child Component receiving props object
function Greeting(props) {
  return (
    <div className="card">
      <h3>Hello, {props.name}!</h3>
      <p>Age: {props.age}</p>
      {props.isAdmin && <span>[Admin User]</span>}
    </div>
  );
}

Props are Read-Only (Immutable)

React enforces a strict rule: Props are read-only. A component must never modify its own props parameter.

// ❌ WRONG: Never mutate props directly!
function Counter(props) {
  props.count = props.count + 1; // TypeError! Props are read-only!
  return <div>{props.count}</div>;
}

If a child component needs to change data, the parent component must pass a state-updating callback function down via props.

Summary & TL;DR

• Props pass data downwards from parent to child components.
• Props are received as a single JavaScript object parameter in functional components.
• Props are read-only (immutable). Never attempt to modify props inside a child component.