Reading props
- React course
- Beginner
- Lesson 18/84
- 4 min
Learn to take the props object apart with destructuring.
Reading props
Destructuring the props object is common in React. function Button({ label }) { return <button>{label}</button>; } lets you use label directly instead of props.label.
When there are several props you separate them with commas: ({ '{ label, onClick, disabled }' }). This makes clear which data the function expects right in its signature.
Destructuring is also a way to document which props are used: a glance at the function tells you what data the component needs.
Destructuring benefit
The biggest benefit of destructuring is readability. Instead of writing props.name, props.role, props.city, you write name, role, city.
The second benefit is showing dependencies. The signature ({ '{ name, role }' }) says this component only needs these two pieces of data.
Using destructuring on the props parameter is a standard practice in the React community.
Practice Button props
Complete the skeleton. Write a component called Button that takes ({ '{ label }' }) as parameter and returns <button>{label}</button>. Don't forget to export.
Starter code
// Write the Button component hereSample solution
function Button({ label }) {
return <button>{label}</button>;
}
export default Button;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is the destructuring syntax?
- (name)
- props.name
- [name]
- { name } Correct answer
Explanation: { name } is the destructuring syntax.
2 Two-prop destructuring
Two props: ____ and role.Two props: name and role.Explanation: name and role are two props.
3 Match the destructuring forms
| Term | Meaning |
|---|---|
{ name } |
One prop |
{ name, role } |
Two props |
{ ...rest } |
Rest |
props |
Whole object |