Props Destructuring
In React, props destructuring is a simple yet powerful way to make your code cleaner and easier to read. It helps you extract specific values from the props object without repeatedly writing props. everywhere in your component.
What Is Props Destructuring?
When you pass data from a parent component to a child component, that data is received as an object called props. By destructuring, you can directly unpack values from that object into variables.
In short, instead of doing this:
function Greeting(props) {
return <h2>Hello, {props.name}!</h2>;
}
You can simplify it using destructuring:
function Greeting({ name }) {
return <h2>Hello, {name}!</h2>;
}
Destructuring Inside the Function Body
You can also destructure inside the function body instead of in the parameter list.
function Greeting(props) {
const { name, age } = props;
return (
<h2>
Hello, {name}! You are {age} years old.
</h2>
);
}
Multiple Props Example:
Destructuring is especially helpful when a component receives multiple props.
function UserCard({ name, age, profession }) {
return (
<div className="user-card">
<h3>{name}</h3>
<p>Age: {age}</p>
<p>Profession: {profession}</p>
</div>
);
}
function App() {
return (
<UserCard name="Alice" age={25} profession="Developer" />
);
}
Destructuring with Default Values
You can also assign default values while destructuring, which is useful when a prop might not be passed.
function Greeting({ name = "Guest", age = 18 }) {
return (
<h2>
Hello, {name}! You are {age} years old.
</h2>
);
}
Destructuring Nested Props
Sometimes, props contain nested objects (for example, when data comes from an API).
You can destructure these nested values directly.
function Profile({ user: { name, age, city } }) {
return (
<div>
<h3>{name}</h3>
<p>Age: {age}</p>
<p>City: {city}</p>
</div>
);
}
function App() {
const userData = { name: "John", age: 30, city: "New York" };
return <Profile user={userData} />;
}
Destructuring in Class Components
In class components, you can destructure props inside the render() method.
class Greeting extends React.Component {
render() {
const { name, age } = this.props;
return (
<h2>
Hello, {name}! You are {age} years old.
</h2>
);
}
}
Destructuring the children Prop
React automatically provides a special prop called children for nested content.
You can destructure it just like any other prop.
function Card({ title, children }) {
return (
<div className="card">
<h3>{title}</h3>
<div>{children}</div>
</div>
);
}
function App() {
return (
<Card title="React Tips">
<p>Destructuring props makes components cleaner!</p>
</Card>
);
}
Benefits of Props Destructuring
- Cleaner and more readable code
- Reduces repetition (
props.everywhere) - Makes components easier to maintain
- Allows adding default values easily
- Works with both functional and class components
Example:
function Profile({ name = "Guest", age, profession, children }) {
return (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
<p>Profession: {profession}</p>
<div>{children}</div>
</div>
);
}
function App() {
return (
<Profile name="Emma" age={28} profession="Designer">
<p>Location: Paris</p>
</Profile>
);
}