A default value supplies a component property when the caller omits it. In functional components, destructuring provides the direct modern pattern; class-based components use the component’s defaultProps object. section 4.3.3
Choose the fallback according to the component shape and maintenance context:
- Set a fallback during parameter destructuring, such as target="_self" or name="Stranger". section 4.3.3
- Assign defaultProps on class-based components, where the pattern remains relevant for older codebases. section 4.3.3
- Avoid defining the same fallback in both places: defaultProps overrides the matching destructuring default. section 4.3.3
- Keep optionality separate from fallback choice: PropTypes.isRequired marks required properties, while optional properties do not necessarily need defaults. section 4.3.1
A link with a safe target
MenuItem can render a link with target="_self" when callers omit target. A functional component expresses this in its parameter list; a class component expresses the same behavior through MenuItem.defaultProps. section 4.3.3
function MenuItem({ label, href, target="_self" }) { #1
return (
<li>
<a href={href} title={label} target={target}>
{label}
</a>
</li>
);
}
MenuItem.propTypes = { #2
label: PropTypes.string.isRequired,
href: PropTypes.string.isRequired,
target: PropTypes.string, #3
};
Inspect the functional MenuItem implementation, including its destructuring fallback and optional target property. section 4.3.3
class MenuItem extends React.Component {
render() {
return (
<li>
<a
href={this.props.href}
title={this.props.label}
target={this.props.target} #1
>
{this.props.label}
</a>
</li>
);
}
}
MenuItem.propTypes = {
label: PropTypes.string.isRequired,
href: PropTypes.string.isRequired,
target: PropTypes.string, #2
};
MenuItem.defaultProps = { #3
target: "_self",
};
Compare the class-based equivalent, where defaultProps supplies the target fallback. section 4.3.3
