Deep Dive: Understanding 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.
1. The Functional Philosophy
Just as you pass parameters into standard functions to get dynamic returns, you pass props into components to get dynamic UI outputs. This creates high component reusability.
// Reusable Component
function PriceTag({ value, currency }) {
return <span>{value} {currency}</span>;
}
// Usage
<PriceTag value={100} currency="USD" />
2. 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.
3. 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."