Reading props

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.

Exercise 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.

Show example solution

function Button({ label }) {
  return <button>{label}</button>;
}

export default Button;

Test yourself

What is the destructuring syntax?
- (name)
- props.name
- [name]
- { name }
Show answer

{ name } — { name } is the destructuring syntax.

Two-prop destructuring

Two props: ____ and role.

Show answer

Two props: name and role.

Match the destructuring forms

{ name }

One prop
{ name, role }

Two props
{ ...rest }

Rest
props

Whole object

Next lesson: Children prop

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies