Introduction
Props Destructuring is a simple JavaScript technique used in React to make props easier to use. Instead of repeatedly writing props.name, props.age, or props.city, we can extract these values directly from the props object. It makes React components cleaner, shorter, and easier to read. In this chapter, you will practice Props Destructuring through 10 solved questions, starting with basic examples and moving toward practical component usage. React Props Destructuring Practice questions with solutions help to understand the concepts.
1. What is Props Destructuring in React?
Props Destructuring means taking individual values from the props object and storing them directly in variables.
Without destructuring:
function Student(props) {
return <h2>{props.name}</h2>;
}
With destructuring:
function Student({ name }) {
return <h2>{name}</h2>;
}
Both examples produce the same result.
Answer: Props Destructuring allows us to directly extract values from the props object.
2. How do you destructure a single prop?
Suppose a component receives a name prop.
function Student({ name }) {
return <h2>Student: {name}</h2>;
}
function App() {
return <Student name="Rahul" />;
}
export default App;
Here, { name } extracts the name value from props.
Output:
Student: Rahul
Answer: Use curly braces inside the function parameter to destructure the required prop.
3. How do you destructure multiple props?
You can destructure multiple props 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="Riya"
age={20}
course="React.js"
/>
);
}
export default App;
Here, name, age, and course are directly available inside the component.
Answer: Separate multiple destructured props with commas.
4. What is the difference between props and destructured props?
Consider this example:
function Student(props) {
return <h2>{props.name}</h2>;
}
Here, we access the value using:
props.name
With destructuring:
function Student({ name }) {
return <h2>{name}</h2>;
}
Here, we can directly use:
name
Answer: Destructuring does not change the props. It only provides a shorter and cleaner way to access their values.
5. Can you destructure props inside the function body?
Yes. Props can also be destructured inside the component.
function Student(props) {
const { name, age } = props;
return (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
</div>
);
}
function App() {
return <Student name="Aman" age={21} />;
}
export default App;
The following line extracts the values:
const { name, age } = props;
Answer: Yes, props can be destructured either in the function parameter or inside the function body.
6. How do you use default values with destructured props?
JavaScript allows us to provide a default value during destructuring.
function Student({ name = "Unknown", course = "Not Assigned" }) {
return (
<div>
<h2>{name}</h2>
<p>{course}</p>
</div>
);
}
function App() {
return <Student />;
}
export default App;
Since no props are provided, the default values are used.
Output:
Unknown
Not Assigned
Answer: Use the = operator to provide a default value while destructuring.
7. Can you rename a destructured prop?
Yes. JavaScript allows you to give a different local variable name to a prop.
function Student({ name: studentName }) {
return <h2>{studentName}</h2>;
}
function App() {
return <Student name="Neha" />;
}
export default App;
Here:
name: studentName
means the name prop will be stored in a local variable called studentName.
Output:
Neha
Answer: Use the syntax originalName: newName to rename a destructured prop.
8. How do you destructure an object passed as a prop?
Suppose an object is passed as a prop.
function Student({ student }) {
const { name, age, course } = student;
return (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
<p>Course: {course}</p>
</div>
);
}
function App() {
const studentData = {
name: "Priya",
age: 20,
course: "JavaScript"
};
return <Student student={studentData} />;
}
export default App;
There are two levels of destructuring here:
function Student({ student }) {
and:
const { name, age, course } = student;
Answer: First destructure the object prop, then destructure its properties if needed.
9. What is the cleaner way to destructure nested props?
Suppose an object is passed through a prop:
const student = {
name: "Karan",
age: 22
};
A component can directly destructure the nested values:
function Student({ student: { name, age } }) {
return (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
</div>
);
}
function App() {
const studentData = {
name: "Karan",
age: 22
};
return <Student student={studentData} />;
}
export default App;
Here:
{ student: { name, age } }
extracts name and age directly from the student object.
Answer: Nested destructuring can directly extract properties from an object received through props.
10. Build a practical Student Card using Props Destructuring.
Create a reusable StudentCard component that receives name, course, age, and city.
function StudentCard({ name, course, age, city }) {
return (
<div>
<h2>{name}</h2>
<p>Course: {course}</p>
<p>Age: {age}</p>
<p>City: {city}</p>
</div>
);
}
function App() {
return (
<div>
<StudentCard
name="Rahul"
course="React.js"
age={21}
city="Delhi"
/>
<StudentCard
name="Anjali"
course="JavaScript"
age={20}
city="Mumbai"
/>
</div>
);
}
export default App;
The StudentCard component uses:
function StudentCard({ name, course, age, city })
Instead of writing:
props.name
props.course
props.age
props.city
we can directly use:
name
course
age
city
Answer: Props Destructuring makes reusable React components shorter, cleaner, and easier to understand.
Key Takeaways
- Props Destructuring is based on JavaScript object destructuring.
- It provides a cleaner way to access props.
- Instead of
props.name, we can directly usename. - Multiple props can be destructured together.
- Props can be destructured inside the function parameter.
- Props can also be destructured inside the component body.
- Default values can be provided during destructuring.
- Destructured props can be renamed.
- Objects passed through props can also be destructured.
- Props Destructuring improves code readability and component reusability.
FAQs
1. What is Props Destructuring in React?
Props Destructuring is a JavaScript technique that allows us to extract individual values from the React props object.
2. Why should we use Props Destructuring?
It makes component code shorter, cleaner, and easier to read.
3. Is Props Destructuring required in React?
No. It is optional. You can use either props.name or destructuring such as { name }.
4. Can we destructure multiple props?
Yes. For example:
function User({ name, age, city }) {
return <p>{name} - {age} - {city}</p>;
}
5. Can we provide default values while destructuring props?
Yes. For example:
function User({ name = "Guest" }) {
return <h2>{name}</h2>;
}
6. Can we rename a destructured prop?
Yes. You can use:
function User({ name: userName }) {
return <h2>{userName}</h2>;
}
7. Does Props Destructuring change the original props?
No. Destructuring only creates convenient local variables for accessing the values. It does not modify the original props.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
