Passing Props
Overview
In React, data flows in one direction: from Parent components down to Child components. The mechanism for this data transfer is called Props (short for 'Properties').
If a component is like a custom HTML tag, then props are like custom HTML attributes. Just as you pass a src attribute to an <img> tag to tell it which picture to display, you pass props to a custom component to dictate its content or behavior. Without props, every component would be completely static and identical. Props allow you to write one generic component (like a <UserCard>) and reuse it 50 times with 50 different names and avatars.
Props are strictly read-only (immutable). A child component can read the props it was given, but it cannot ever modify or reassign them. If a child needs to change the data, it must call a function passed down from the parent (often called lifting state up), forcing the parent to update the data and send the new props back down.
Syntax
// 1. PARENT Component passing data down
function App() {
return (
<div>
{/* Passing strings, numbers, and booleans */}
<UserProfile name="Kartik" age={25} isPremium={true} />
<UserProfile name="Alice" age={22} isPremium={false} />
</div>
);
}
// 2. CHILD Component receiving data
// All attributes are bundled into a single object called 'props'
function UserProfile(props) {
return (
<div className="card">
<h2>{props.name}</h2>
<p>Age: {props.age}</p>
{props.isPremium ? <span>Pro Member</span> : null}
</div>
);
}Common Pitfalls
- Trying to modify props: Never write
props.name = 'Bob';inside a child component. React throws an error because props are frozen (read-only). Data modification must happen via State in the parent component.
Interview Questions
React strictly enforces unidirectional data flow. If a child could directly modify a prop, it would silently mutate the parent's data without the parent knowing, leading to unpredictable bugs and breaking React's predictable render cycle.
You pass a function exactly like any other variable using curly braces: <Button onClick={handleClick} />. The child component receives this function in its props object and can execute it (e.g., props.onClick()), allowing the child to communicate back to the parent.
Real-World Example
Configurable Dashboard Widgets: In enterprise software, you rarely build 3 different widgets. You build 1 highly flexible widget and pass it props to dictate its color theme, the icon it renders, and the data it displays.
// A generic widget component that completely changes based on props
function DashboardWidget(props) {
return (
<div className={`widget ${props.theme}`}>
<div className="widget-header">
<props.IconComponent />
<h3>{props.title}</h3>
</div>
<h1 className="metric-value">{props.value}</h1>
<p className="trend">{props.trend > 0 ? '↑' : '↓'} {props.trend}%</p>
</div>
);
}
// The Dashboard renders the same widget 3 times with different configurations
function Dashboard() {
return (
<div className="grid">
<DashboardWidget title="Revenue" value="$45k" trend={12} theme="green" IconComponent={MoneyIcon} />
<DashboardWidget title="Users" value="1,200" trend={-2} theme="blue" IconComponent={UserIcon} />
<DashboardWidget title="Errors" value="4" trend={0} theme="red" IconComponent={AlertIcon} />
</div>
);
}Check Your Knowledge
Test your understanding of Passing Props with these quick questions.