How to Set Default Prop Values in React

Set default prop values in React by assigning them during destructuring. The default applies only when a prop is missing or undefined, which makes a component safe to use with fewer props. Defaults also document what a sensible value looks like when a caller does not care.

Set a default in destructuring

Give a prop a fallback by writing an equals sign and a value inside the destructuring parameter list. This Greeting defaults name to Guest:

App.jsx

function Greeting({ name = "Guest" }) {
  return <h1>Hello, {name}</h1>;
}
 
function App() {
  return <Greeting />;
}

The browser shows "Hello, Guest." because App did not pass a name. Pass a name and the default is ignored in favor of the real value. The same syntax works for numbers, booleans, arrays, and objects, not only strings.

Default several props at once

Components often have a few optional settings. Default each one in the same destructuring:

App.jsx

function Button({ variant = "primary", size = "md" }) {
  return <button className={variant + " " + size}>Save</button>;
}

A parent can render a bare Button and get a primary, medium button, or override one value while leaving the other at its default. This is how small component libraries keep their APIs short.

When the default does not apply

The default only kicks in when the prop is missing or undefined. Other values pass through unchanged.

This matters for booleans and numbers. If a component defaults count to 0, passing 0 is still meaningful, so the default is not triggered. The default only fills the gap when nothing was provided, and never overrides a value the parent chose.

Default the whole props object

A component rendered with no props at all receives undefined. Default the entire object when you want it to tolerate that case:

App.jsx

function Button({ label = "Click" } = {}) {
  return <button>{label}</button>;
}

Now a bare Button renders "Click." The inner default handles the label, and the outer default handles a missing props object entirely. This second default matters when a component is rendered with no attributes at all, which would otherwise pass undefined for the whole props object.

Defaults are for optional configuration

Use defaults for values most callers leave alone, like a size or a variant. Do not default values the parent must always choose, such as an id or a label that changes the component's meaning.

A good default removes a decision for common cases without hiding a required input. Components with sensible defaults read better at the call site, because the common case shows almost no props.

What to learn next

See how defaults fit into passing props, then learn how composition replaces inheritance for reusing components.