When destructuring, we can assign default values to props.
In the Settings component below, we have assigned the default values light and English for theme and language, respectively.
If we skip the theme or language prop, their default values will be used inside the Settings component.
For example, calling the Settings as given below will override the theme to dark, whereas language will be defaulted to English.
The default value is only used if the prop is not passed or set to undefined. In all other cases, it will not use the default prop value.
Here are some examples demonstrating the same:
Renaming props
It is also possible to rename props while destructuring them.
For example, we can rename the theme prop of the Setting component as appearance:
You can even combine defaulting and renaming in a single attribute like so: