Props destructuring is a JavaScript technique that allows you to extract individual properties directly from the props object. It makes React components cleaner and easier to read.
props.name, props.age, or
props.course, you can destructure these properties directly
inside the component parameter.
Props destructuring means extracting properties from the props object and using them directly inside the component.
Without destructuring:
function Student(props) {
return (
<h2>
{props.name}
</h2>
);
}With destructuring:
function Student({ name }) {
return (
<h2>
{name}
</h2>
);
}Destructuring makes component code shorter and more readable.
props. syntax.
Suppose a component receives a name prop.
function Student({ name }) {
return (
<h2>
{name}
</h2>
);
}
The name property is extracted from the props object.
function App() {
return (
<Student name="Rahul" />
);
}
The value Rahul is passed to the Student
component through the name prop.
Multiple properties can be destructured at the same time.
function Student({ name, age, course }) {
return (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
<p>Course: {course}</p>
</div>
);
}function App() {
return (
<Student
name="Neha"
age={20}
course="React"
/>
);
}The child component receives all three values.
Without destructuring:
function Course(props) {
return (
<div>
<h2>{props.name}</h2>
<p>{props.duration}</p>
<p>{props.fee}</p>
</div>
);
}With destructuring:
function Course({ name, duration, fee }) {
return (
<div>
<h2>{name}</h2>
<p>{duration}</p>
<p>{fee}</p>
</div>
);
}The most common approach is to destructure props directly in the function parameter.
function Welcome({ name }) {
return (
<h1>
Welcome {name}
</h1>
);
}You can also receive the complete props object and destructure it inside the function.
function Student(props) {
const { name, age } = props;
return (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
</div>
);
}function Greeting({ name }) {
return (
<h2>
Hello {name}
</h2>
);
}<Greeting name="Amit" />Number values can also be destructured.
function Student({ age }) {
return (
<p>
Age: {age}
</p>
);
}<Student age={21} />function User({ isActive }) {
return (
<p>
Status:
{isActive ? " Active" : " Inactive"}
</p>
);
}<User isActive={true} />Arrays can be destructured as properties of the props object.
function Subjects({ subjects }) {
return (
<ul>
{subjects.map(subject => (
<li key={subject}>
{subject}
</li>
))}
</ul>
);
}<Subjects
subjects={["HTML", "CSS", "React"]}
/>An object can be passed as a prop and then used inside the component.
function Student({ student }) {
return (
<div>
<h2>
{student.name}
</h2>
<p>
Age: {student.age}
</p>
</div>
);
}Nested object properties can also be destructured.
function Student({ student: { name, age } }) {
return (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
</div>
);
}A default value can be provided when a prop is not supplied.
function Welcome({
name = "Student"
}) {
return (
<h2>
Welcome {name}
</h2>
);
}
If no name prop is passed, the component uses
Student.
function Course({
name = "React",
duration = "3 Months",
fee = 5000
}) {
return (
<div>
<h2>{name}</h2>
<p>Duration: {duration}</p>
<p>Fee: ₹{fee}</p>
</div>
);
}Functions passed through props can also be destructured.
function Button({ onClick }) {
return (
<button onClick={onClick}>
Click Me
</button>
);
}function App() {
function handleClick() {
alert("Hello!");
}
return (
<Button
onClick={handleClick}
/>
);
}
The child component can use the destructured
onClick function.
The special children prop can also be destructured.
function Card({ children }) {
return (
<div className="card">
{children}
</div>
);
}<Card>
<h2>React Course</h2>
</Card>Destructured variables can be directly used inside JSX.
function Profile({ name, role }) {
return (
<div>
<h2>{name}</h2>
<p>
Role: {role}
</p>
</div>
);
}Without destructuring:
<h2>{props.name}</h2>
<p>{props.course}</p>
<p>{props.duration}</p>With destructuring:
<h2>{name}</h2>
<p>{course}</p>
<p>{duration}</p>The second version is shorter and easier to read.
function Course({
name,
duration,
fee
}) {
return (
<div className="course-card">
<h2>{name}</h2>
<p>
Duration: {duration}
</p>
<p>
Fee: ₹{fee}
</p>
</div>
);
}<Course
name="React"
duration="6 Months"
fee={10000}
/>
<Course
name="Python"
duration="6 Months"
fee={8000}
/>Destructuring works with arrow function components as well.
const Student = ({ name, age }) => {
return (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
</div>
);
};function UserStatus({ isLoggedIn, name }) {
return (
<div>
{isLoggedIn ? (
<h2>
Welcome {name}
</h2>
) : (
<h2>
Please Login
</h2>
)}
</div>
);
}function StudentList({ students }) {
return (
<ul>
{students.map(student => (
<li key={student.id}>
{student.name}
</li>
))}
</ul>
);
}
The students array is extracted directly from props.
Props can be destructured in a component that also uses state.
import { useState } from "react";
function Counter({ title }) {
const [count, setCount] = useState(0);
return (
<div>
<h2>{title}</h2>
<p>
Count: {count}
</p>
<button
onClick={() => setCount(count + 1)}
>
Increase
</button>
</div>
);
}When destructuring, the property name must match the prop name unless you intentionally rename it.
function Student({ name }) {
return (
<h2>{name}</h2>
);
}
If the parent sends studentName instead of
name, the component will not receive the expected
property.
<Student
studentName="Rahul"
/>function StudentCard({
name,
age,
course,
city
}) {
return (
<div className="card">
<h2>
{name}
</h2>
<p>
Age: {age}
</p>
<p>
Course: {course}
</p>
<p>
City: {city}
</p>
</div>
);
}
function App() {
return (
<div>
<StudentCard
name="Rahul"
age={21}
course="React"
city="Patna"
/>
<StudentCard
name="Neha"
age={20}
course="JavaScript"
city="Delhi"
/>
</div>
);
}
export default App;The same component is reused with different values, and all props are destructured directly in the component parameter.
children prop for nested content.props.propertyName syntax.children prop can also be destructured.Question: Which syntax is used to destructure props directly inside a React functional component parameter?