Props in React

Props are inputs. Parent decides. Child reads. They work like function arguments. <Price amount={199} /> — Price receives the object { amount: 199 }. You almost always destructure: function Price({ amount }) { return <span>₹{amount}</span>; }. Screen: ₹199.

You do not assign amount = 0 inside Price. Props are read-only. If the child needs a new number, the parent changes what it passes (parent state), or you lift state so the owner can update. Mutating props is the classic fresher bug: the console might show a new value, the UI still looks old, and React may warn in development.

children is a special prop: whatever you nest between the tags. <Card>Hello</Card> → props.children is Hello. That is how layout shells work — Card does not know the inner title in advance. Default values cover optionals: function Price({ amount = 0 }). TypeScript (or PropTypes on old JS apps) documents the shape so a string does not sneak into amount.

Let’s take a product row on the board. Parent holds qty in state. It renders <Price amount={49 * qty} /> and <Tag label="Sale" />. Price and Tag only read. Neither increments qty. The + button lives in the parent and calls setQty. Props down, event up.

When props look ‘stuck’: you passed a value once and never passed the new one after state changed — maybe you stored props in local state on mount and forgot to sync. Prefer using the prop directly during render. If you must copy props into state, know you are creating a fork that can go stale.

Trap: spreading {...props} onto a DOM node blindly (unknown attributes). Trap: new object/array props every render (style={{}} or items={[]}) which breaks memo/PureComponent. Create lists outside or memoize when it actually matters.

Props in React — on screen — ₹199. amount came from App. Price must not do amount = 0.

Diagram

Parent
    │ amount={199}
    ▼
  Price → ₹199

Exam tip

Read-only + one <Child prop= /> example.

Example

// Props
function Price({ amount }) {
  return <span>₹{amount}</span>;
}

export default function App() {
  return <Price amount={199} />;
}

Props in React — on screen: ₹199. amount came from App. Price must not do amount = 0.

Short notes

DefProps are read-only inputs from the parent, like function arguments. Child only reads them.
RuleDon’t assign to props. If the value must change, the owner (parent state) updates and passes again.
Rememberchildren is the nested content. Defaults cover optional props. TS/PropTypes document the shape.
UsePrice amount, Tag label, Card children — anything the parent already knows.
TrapMutating props. Copying props into state and forgetting to sync. New {{}} props every render.
Ex<Price amount={199} /> → ₹199. Parent qty state × 49 becomes the next amount prop.
LearnRead-only props first, then lift state, then callback props (onSave) for child→parent asks.

Props in React

Props in React — on screen — ₹199. amount came from App. Price must not do amount = 0.

Diagram

Parent
    │ amount={199}
    ▼
  Price → ₹199

Exam tip

Read-only + one <Child prop= /> example.

Props in React

Example

Short notes

Questions

Props in React

Example

Short notes

Questions