Flash cards
Review the key moves
What is the main idea behind React Destructuring Props?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___ Car({color}) {Put the learning moves in the order that makes the concept easiest to apply.
Destructuring Props
You can limit the properties a component receives by using destructuring.
Example
The component knows it only need the color property, so in the function definition, it only specifies that:
function Car({color}) {
return ( <h2>My car is {color}!</h2> );
}
createRoot(document.getElementById('root')).render( <Car brand="Ford" model="Mustang" color="red" year={1969} /> );Note
React uses curly brackets to destructure props: {color} .
You can also destruct the properties you need inside the component.
This way, the component receives all the properties, but the destructuring makes sure it only uses the ones it needs.
Example
The component receives all the properties, but uses destructuring to limit the properties inside the component.
function Car(props) {
const {brand, model} = props;
return ( <h2>I love my {brand} {model}!</h2> );
}
createRoot(document.getElementById('root')).render( <Car brand="Ford" model="Mustang" color="red" year={1969} /> );Destructuring ...rest
When you don't know how many properties you will receive, you can use the ...rest operator.
Meaning: you can specify the properties you need, and the rest will be stored in an object.
Example
The component specifies the color and the brand, but the rest is stored in an object like this: { model: "Mustang", year: 1969 } .
function Car({color, brand, ...rest}) {
return ( <h2>My {brand} {rest.model} is {color}!</h2> );
}
createRoot(document.getElementById('root')).render( <Car brand="Ford" model="Mustang" color="red" year={1969} /> );Default Values
With Destructuring, you can set default values for props.
If a property has no value, the default value will be used.
Example
Set the default color value to "blue":
function Car({color = "blue", brand}) {
return ( <h2>My {color} {brand}!</h2> );
}
createRoot(document.getElementById('root')).render( <Car brand="Ford" /> );