A default value supplies a component property when callers leave it unspecified. In React components, this is ordinary JavaScript syntax used with destructured properties, not React-specific behavior. section 4.1 section 4.1.3
Defaulting a menu link target
function MenuItem({ label, href, target = "_self" }) { return ( <li className="menu-item"> <a className="menu-link" href={href} target={target}> {label} </a> </li> ); } <MenuItem label="Home" href="/" /> <MenuItem label="Blog" href="/blog" target="_blank" /> Home uses "_self" automatically, while Blog overrides the default with "_blank". Properties with defaults are commonly placed after nondefault properties, although either order is valid. section 4.1.3
Listing 4.6 Menu items with a default target
...
function Menu() {
return (
<nav className="navbar">
<h1 className="title">TheMenuCompany</h1>
<ul className="menu">
<MenuItem label="Home" href="/" /> #1
<MenuItem label="About" href="/about/" /> #1
<MenuItem
label="Blog" href="/blog" target="_blank" #2
/>
</ul>
</nav>
);
}
function MenuItem({ label, href, target = "_self" }) { #3
return (
<li className="menu-item">
<a
className="menu-link"
href={href}
target={target}
>
{label}
</a>
</li>
);
}
...
Compare explicit targets on every menu item with a concise component that defaults target to "_self" and overrides it only for the blog link. section 4.1.3
Related uses distinguish several kinds of default values:
- Use defaultValue for the initial value of an uncontrolled form input; do not also set its value property. section 9.6
- Pass a default value to createContext; useContext returns it when no associated provider is found. section 10.1.3 section 10.5
