Default Props in React
From the React Components & JSX cheat sheet · Component Essentials · verified Jul 2026
Default Props
Set default values for optional props
javascript
// Default props with destructuring
function Button({
text,
color = 'blue',
size = 'medium'
}) {
return (
<button className={'btn-' + size} style={{ color }}>
{text}
</button>
)
}
// Some props use defaults, some don't
<Button text="Click me" />
<Button text="Submit" color="green" size="large" />💡 Use = in destructuring for clean defaults
📌 Default values only used if prop is undefined
⚡ Defaults make components more flexible
⚛️ React 19 removed defaultProps for function components - use default params (shown here)
propsdefaults