Default Props
In this page:
Setting a Default with JS Default Parameters
Function components can use standard JavaScript default parameter syntax to provide a fallback value for a prop. If the caller doesn't pass that prop, the default is used automatically -- no extra configuration needed.
Note: Destructure props with defaults directly in the function signature for the cleanest syntax: function Greeting({ name = "Guest" }).
Warning: Defaults only kick in for undefined values -- passing null explicitly will NOT trigger the default.
Example: Setting a Default with JS Default Parameters
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Greeting({ name = "Guest" }) {
return <p>Hello, {name}!</p>;
}
function App() {
return <div><Greeting name="Alex" /><Greeting /></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Why Default Props Matter
Providing sensible defaults means a component behaves reasonably even when used quickly without every prop specified. This reduces bugs and makes a component more pleasant to reuse across a codebase, since callers don't have to remember every optional setting.
Note: Give defaults to props that have an obvious normal value, like a button's type defaulting to "button".
Warning: Overusing defaults for props that should really be required can hide bugs where a value was forgotten by mistake.
Example: Why Default Props Matter
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Button({ label = "Click me", type = "button" }) {
return <button type={type}>{label}</button>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Button />);
</script>
</body>
</html>Defaults for Multiple Props
You can give default values to as many destructured props as needed in the same function signature. Each prop's default is independent -- a caller can override just one of them while still relying on defaults for the rest.
Note: Order doesn't matter when destructuring with defaults -- you can mix required and defaulted props freely.
Warning: A default value referencing another prop's current value isn't supported directly in destructuring -- compute derived values inside the function body instead.
Example: Defaults for Multiple Props
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Avatar({ size = 40, alt = "User avatar" }) {
return <div style={{width: size, height: size, background: "#ccc", borderRadius: "50%"}} title={alt} />;
}
function App() {
return <div><Avatar /><Avatar size={80} /></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>- Assuming default parameter values only work with class components -- they actually work great with function components too.
- Setting a default value but still passing
undefinedexplicitly, which still triggers the default (this is expected, but often surprising). - Forgetting that passing
null(notundefined) does NOT trigger the default value.
- Default values ensure a component has sensible behavior even if a prop isn't passed.
- In function components, JavaScript's default parameter syntax handles this directly.
- A default only applies when the prop is
undefined, not when it'snullor an empty string. - Defaults make components more robust and easier to use.
No browser-specific restrictions -- uses standard JavaScript default parameters, available since ES6.
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: