Deep Dive: Props
React components are essentially functions. In JavaScript, functions receive arguments. In React, components receive Props. This allows us to use the same component logic to render different data.
The Functional Philosophy
Props make components reusable. You build a Button once, and you pass different text or color props to render multiple variants.
// Reusable Component
function PriceTag({ value, currency }) {
return <span>{value} {currency}</span>;
}
// Usage
<PriceTag value={100} currency="USD" />
<PriceTag value={85} currency="EUR" />
Immutability (Read-Only)
One of the most important rules in React is that Props must be pure. A component must never modify its own props. If you need to change a value based on user interaction, you should use State, not props.
Passing Functions (Callbacks)
Since React follows a "top-down" data flow, how does a child tell a parent something happened? By calling a function passed as a prop.
"Parent: Here is a button and a 'LogOut' function. Call this function when the button is clicked."