Default Prop Values in React Function Components

Runnable lesson · press Try it on the examples to edit and run them here.

Sometimes a prop is optional, and you want a sensible value when the parent does not pass it. In modern React you do this with JavaScript’s own default values.

Default parameter values

Combine destructuring with =:

1
2
3
4
5
6
7
8
9
10
11
12
13

function Button({ label = "Click me", variant = "primary" }) {
  return <button style={{ background: variant === "primary" ? "#1a5276" : "#eee", color: variant === "primary" ? "#fff" : "#111", padding: "6px 14px", border: 0, borderRadius: 6 }}>{label} ({variant})</button>;
}

function App() {
  return (
    <div style={{ display: "flex", gap: 8 }}>
      <Button />
      <Button label="Save" />
      <Button label="Cancel" variant="secondary" />
    </div>
  );
}

<Button /> receives no props, so both defaults apply. The default is used only when the prop is undefined, meaning missing, or explicitly undefined.

undefined versus null

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function Card({ title = "Untitled" }) {
  return <p>Title: {title === null ? "null" : title}</p>;
}

function App() {
  return (
    <div>
      <Card />
      <Card title={undefined} />
      <Card title={null} />
      <Card title="" />
    </div>
  );
}

The first two show Untitled. null and the empty string are real values, so the default does not apply to them. If you want a fallback for “null, undefined or empty”, use ?? or || in the body:

• title ?? "Untitled" replaces null and undefined only.
• title || "Untitled" replaces any falsy value, including "" and 0.

Pick on purpose. For numbers, || is a trap, because 0 || 10 is 10; read about it in Nullish Coalescing.

Defaults for object props

Defaults are also useful for objects and arrays, so the code inside the component does not have to check for undefined before using them:

1
2
3
4
5
6
7
8

function TagList({ tags = [] }) {
  if (tags.length === 0) return <p>No tags yet</p>;
  return <ul>{tags.map((t) => <li key={t}>{t}</li>)}</ul>;
}

function App() {
  return <TagList />;
}

Legacy: defaultProps

Older code sets defaults like this:

1
2

// Removed for function components in React 19
Button.defaultProps = { label: "Click me" };

defaultProps on function components was removed in React 19: it is ignored. Class components still support it. If you maintain older code, replace defaultProps with default parameter values as shown above. The same goes for propTypes, which React 19 no longer checks; TypeScript is the modern way to describe props, see React with TypeScript.

When to use a default

• Good: optional visual choices (size = "medium"), safe empty values (items = []).
• Be careful: a default that hides a missing required prop. If a component cannot work without userId, do not give it a made-up default. Let it fail loudly in development, or have TypeScript require it.

Key points

• Set defaults with parameter defaults: function Button({ label = "Click me" }).
• A default applies only to undefined, not to null, "" or 0.
• defaultProps no longer works on function components in React 19.