Can a child component modify the props it receives?
No. Props are read-only; React treats them as immutable snapshots from the parent. To change a value, the parent passes down a callback, and the child calls it so the parent updates its own state.
Explain it simply
Props are like a printed seat allotment slip handed to you at the station. You can read it, but scribbling on it does not change the railway's records. Only the booking office (the parent) can issue a new slip.
React data flows one way, from parent to child. If a child needs to request a change, the parent gives it a function as a prop. The child calls that function, the parent changes its state, and new props flow down.
This one-way flow is what makes React apps easy to debug: when a value looks wrong, you only need to walk up the tree to the component that owns that state, instead of searching every file that touched it.
Example
function Parent() {
const [qty, setQty] = useState(1);
return <Stepper qty={qty} onChange={setQty} />;
}
function Stepper({ qty, onChange }) {
// qty = 5; // wrong: do not assign to props
return <button onClick={() => onChange(qty + 1)}>{qty}</button>;
}What to say in the interview
"Props are read-only, so a child must never mutate them. The usual pattern is lifting state up: the parent owns the value and passes a callback like onChange. The child calls it, the parent updates state, and the child re-renders with the new prop."
Common mistakes
- Mutating an object prop, for example props.user.name = x, which breaks memoisation and causes stale UI.