Props: The Core of Component Communication
In React, an application is a tree of components. But how do these components talk to each other? The primary way is through **props**. "Props" is short for "properties," and they are the mechanism for passing data from a parent component down to a child component.
Think of components as JavaScript functions. Props are their arguments. Just as a function takes arguments to change its behavior, a component takes props to change what it renders.
The Golden Rule: Unidirectional Data Flow
React enforces a strict rule: **data flows one way**, from parent to child. This is called "unidirectional data flow." A parent component can pass data down to its child as props, but a child component **cannot** modify the props it receives. Props are **read-only** (immutable) from the child's perspective.
This rule makes your application far more predictable. When you see an error in the UI, you can trace the data back up the component tree to its source (often a parent's state) without worrying that a child component somewhere modified the data unexpectedly.
Passing and Receiving Props: The Syntax
Passing props looks just like adding attributes to an HTML tag. To receive them, the child component accepts a single argument: an object that contains all the props.
1. The Parent Component (Passing)
function App() {
// Data to pass
const userName = "Sasha";
return (
<UserProfile
name={userName}
age={28}
isAdmin={true}
/>
);
}- Strings can be passed with quotes: `name="Sasha"`
- Variables, numbers, booleans, and objects MUST use curly braces: `age=28`
2. The Child Component (Receiving)
// Option A: The 'props' object
function UserProfile(props) {
return (
<div>
<p>Name: {props.name}</p>
<p>Age: {props.age}</p>
</div>
);
}
// Option B: Destructuring (Recommended)
function UserProfile({ name, age, isAdmin }) {
return (
<div>
<p>Name: {name}</p>
<p>Age: {age}</p>
{isAdmin && <p>Admin User</p>}
</div>
);
}Destructuring is preferred as it's cleaner and makes it obvious what props the component expects.
The Special `children` Prop
There is one special prop that React handles differently: `props.children`. This prop contains whatever you put *between* the opening and closing tags of your component. This is incredibly useful for creating "wrapper" components like cards, modals, or layout elements.
// 1. The Wrapper Component
function Card({ children }) {
return <div className="card">{children}</div>;
}
// 2. How to use it
<Card>
<h1>This is the title</h1>
<p>This paragraph and heading are passed as props.children.</p>
</Card>Passing Functions as Props (Callbacks)
What if a child needs to communicate *up* to a parent? Since props are read-only, the child can't change the parent's data. Instead, the parent passes a **function** down as a prop. The child can then call this function (a "callback") whenever an event happens, like a button click. This function, which lives in the parent, can then update the parent's state.
Key Takeaway: Props are the foundation of building a component-based UI. They allow you to create reusable, "dumb" components that receive data, and "smart" parent components that manage state and pass that data down.
