React Props Default Values

React components often receive data through props. But sometimes a component may be used without receiving every prop it expects.

For example, a reusable button might receive a label prop:

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

If the component is used like this:

<Button />

the label value is undefined.

Instead of allowing missing props to create an incomplete interface, you can provide a default value.

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

Now:

<Button />

displays:

Click Me

Default values make reusable components more predictable and easier to use.

What Are Props Default Values?

A props default value is a fallback value used when a particular prop is undefined.

For example:

function Welcome({ name = "Guest" }) {
  return <h2>Hello, {name}!</h2>;
}

If you provide:

<Welcome name="Karim" />

the component displays:

Hello, Karim!

If you provide:

<Welcome />

the default value is used:

Hello, Guest!

The basic idea is:

Prop provided
     ↓
Use provided value

Prop undefined
     ↓
Use default value

Setting a Default Value with Destructuring

The most common modern approach is to provide the default directly during props destructuring.

function Profile({ name = "Guest" }) {
  return <h2>{name}</h2>;
}

This is JavaScript default parameter/destructuring behavior.

It is concise and works naturally with function components.

Default Values for Multiple Props

A component can have default values for several props.

function UserCard({
  name = "Guest",
  role = "User",
  status = "Offline"
}) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{role}</p>
      <p>{status}</p>
    </div>
  );
}

Now the component can be used with no props:

<UserCard />

Or with only some props:

<UserCard name="Karim" />

The missing props use their default values.

Default Values Are Used for undefined

An important detail is that destructuring defaults are used when the prop is undefined.

Consider:

function Message({ text = "No message" }) {
  return <p>{text}</p>;
}

If the prop is omitted:

<Message />

the default is used.

The same happens when the value is explicitly undefined:

<Message text={undefined} />

But null is a different value.

<Message text={null} />

The default does not replace null.

This distinction becomes important when working with data from APIs or application state.

Default Values for Numbers

You can provide default numeric values.

function Progress({ percentage = 0 }) {
  return <p>Progress: {percentage}%</p>;
}

Using:

<Progress />

produces:

Progress: 0%

If you provide a value:

<Progress percentage={75} />

the provided value is used instead.

Default Values for Boolean Props

Boolean props can also have defaults.

function Button({ disabled = false }) {
  return (
    <button disabled={disabled}>
      Submit
    </button>
  );
}

If disabled is omitted, it defaults to false.

You can override it:

<Button disabled={true} />

A common shorthand is:

<Button disabled />

which passes true.

Default Values for Strings

String defaults are very common.

function Button({ text = "Learn More" }) {
  return <button>{text}</button>;
}

Now the component can be used without specifying text.

<Button />

The button displays:

Learn More

Default Values for Arrays

You can also provide a default array.

function CourseList({ courses = [] }) {
  return (
    <ul>
      {courses.map((course) => (
        <li key={course.id}>
          {course.title}
        </li>
      ))}
    </ul>
  );
}

If no courses prop is provided, the component receives an empty array.

This is useful because you can safely call:

courses.map(...)

without first checking whether courses exists.

Default Values for Objects

Objects can have default values too.

function UserProfile({
  user = {
    name: "Guest",
    role: "Visitor"
  }
}) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.role}</p>
    </div>
  );
}

If the user prop is missing, the default object is used.

However, when you have a more complex object, it can often be clearer to provide defaults for individual properties instead.

For example:

function UserProfile({
  name = "Guest",
  role = "Visitor"
}) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{role}</p>
    </div>
  );
}

The best approach depends on how the component’s API is designed.

Default Values for children

You can also provide a fallback for children.

function Card({
  children = <p>No content available.</p>
}) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

If you use:

<Card />

the fallback content is displayed.

If you provide children:

<Card>
  <h2>React Tutorial</h2>
</Card>

the provided content is used.

Default Values with Destructured Props

You can combine destructuring and default values in one component.

function CourseCard({
  title = "Untitled Course",
  level = "Beginner",
  duration = "Not specified"
}) {
  return (
    <article>
      <h2>{title}</h2>
      <p>Level: {level}</p>
      <p>Duration: {duration}</p>
    </article>
  );
}

This creates a component with sensible fallback values.

You can still provide any values you need:

<CourseCard
  title="React Tutorial"
  level="Intermediate"
  duration="8 hours"
/>

Default Values and Prop Validation

Default values and prop validation solve different problems.

A default value answers:

What should the component use if this prop is undefined?

Prop validation answers questions such as:

What kind of value does this component expect?

For example, in projects using TypeScript, you might define a prop type:

type ButtonProps = {
  label?: string;
};

Then provide a default:

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

The type tells developers what values are expected, while the default provides fallback behavior.

Default Values vs Conditional Rendering

Sometimes beginners use conditional rendering when a default value would be simpler.

For example:

function Greeting({ name }) {
  return (
    <h2>
      Hello, {name || "Guest"}!
    </h2>
  );
}

This treats several falsy values as a fallback, including an empty string, 0, false, null, and undefined, depending on the expression.

If you specifically want the fallback only when name is undefined, use a default value:

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

These approaches have different behavior, so choose based on the data you expect.

Default Values vs ||

Consider:

function Score({ score }) {
  return <p>{score || 0}</p>;
}

This uses 0 when score is any falsy value.

But if 0 is a valid value, this may not express your intention clearly.

A destructuring default:

function Score({ score = 0 }) {
  return <p>{score}</p>;
}

only applies the default when score is undefined.

This distinction is useful when working with numeric data.

Default Values with Event Handlers

You can provide a default function when a callback prop is optional.

For example:

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

Now the component can be rendered without an onClick prop.

However, an empty function should be used thoughtfully. If the callback represents an essential action, making it optional may hide a programming mistake.

Default Values and API Data

Default values are particularly useful when displaying data that may be incomplete.

Suppose an API returns:

{
  title: "React Tutorial"
}

But your component expects a title, level, and duration.

You could write:

function CourseCard({
  title = "Untitled Course",
  level = "Beginner",
  duration = "Not specified"
}) {
  return (
    <article>
      <h2>{title}</h2>
      <p>{level}</p>
      <p>{duration}</p>
    </article>
  );
}

The missing values have sensible fallbacks.

This can make components more resilient when data is incomplete.

However, defaults should not hide serious data problems. If a required value must always exist, it can be better to handle the missing data explicitly.

Default Values for Nested Objects

Suppose a component receives a settings object:

function Settings({
  settings = {}
}) {
  return (
    <div>
      <p>{settings.theme}</p>
    </div>
  );
}

This prevents settings itself from being undefined.

But settings.theme can still be undefined.

You can provide a default for the nested property:

function Settings({
  settings: {
    theme = "light"
  } = {}
}) {
  return <p>Theme: {theme}</p>;
}

This combines nested destructuring with default values.

For beginners, the simpler version is often easier to maintain unless nested destructuring genuinely improves the component.

Default Values Are Not Mutations

Providing a default value does not modify the original props object.

For example:

function Profile({ name = "Guest" }) {
  return <h2>{name}</h2>;
}

The component is simply choosing "Guest" when name is undefined.

It is not changing the parent’s props.

This follows the general React principle that receiving components should treat props as read-only.

Common Mistakes with Default Values

Using the Wrong Default Syntax

This is valid:

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

Do not confuse this with assignment inside JSX:

<button>{label = "Click Me"}</button>

The second example is not the normal way to provide a component prop default.

Expecting Defaults to Replace null

Remember:

function Message({ text = "Hello" }) {
  return <p>{text}</p>;
}

If text is null, the default "Hello" is not applied.

The default applies to undefined.

Creating an Incorrect Fallback

A default value should make sense for the prop.

For example:

function Product({ price = "Unknown" }) {
  return <p>Price: ₹{price}</p>;
}

This creates a type mismatch because the component expects the value to behave like a number.

A better design might use:

function Product({ price = 0 }) {
  return <p>Price: ₹{price}</p>;
}

Or explicitly handle missing prices with suitable UI.

Hiding Required Data Problems

Defaults are useful, but they should not be used to hide every missing value.

If a component absolutely requires an id, silently providing a fake default ID can create incorrect behavior.

Use defaults for genuine fallback behavior, not as a replacement for required data.

Best Practices for Props Default Values

Keep these practices in mind:

• Use destructuring defaults for simple function components.
• Choose defaults that match the expected type and meaning of the prop.
• Remember that destructuring defaults apply when the value is undefined.
• Don’t assume defaults replace null.
• Use [] when a component naturally expects a list and an empty list is a valid fallback.
• Use sensible fallback text for optional display values.
• Don’t use defaults to hide serious application-data problems.
• Keep required props required when the component cannot function correctly without them.
• Use defaults to make reusable components easier to use.
• Keep default behavior predictable.

Practical Example: Web4Learners Tutorial Card

Let’s create a reusable tutorial card with several default values.

function TutorialCard({
  title = "Untitled Tutorial",
  category = "Web Development",
  level = "Beginner",
  duration = "Not specified"
}) {
  return (
    <article className="tutorial-card">
      <h2>{title}</h2>

      <p>Category: {category}</p>

      <p>Level: {level}</p>

      <p>Duration: {duration}</p>
    </article>
  );
}

You can provide all values:

<TutorialCard
  title="React Tutorial"
  category="Frontend"
  level="Beginner"
  duration="6 hours"
/>

Or only provide the title:

<TutorialCard
  title="JavaScript Tutorial"
/>

The other properties use their default values.

You can even render the component without props:

<TutorialCard />

The component still displays useful content.

This is one of the advantages of thoughtful default values in reusable components.

Practical Example with an Array Default

Consider a tutorial list.

function TutorialList({
  tutorials = []
}) {
  return (
    <section>
      <h2>Latest Tutorials</h2>

      {tutorials.length > 0 ? (
        tutorials.map((tutorial) => (
          <article key={tutorial.id}>
            <h3>{tutorial.title}</h3>
          </article>
        ))
      ) : (
        <p>No tutorials available.</p>
      )}
    </section>
  );
}

Now this is safe:

<TutorialList />

because tutorials defaults to an empty array.

The component can handle both:

Tutorial data available
        ↓
Render tutorials

No tutorial prop
        ↓
Use []
        ↓
Show empty state

Image Placement

Place image immediately after the “What Are Props Default Values?” section.

Image description: A modern React infographic showing a component receiving a prop, branching into two paths: when the prop is provided, React uses the provided value; when the prop is undefined, the component uses its default value. Include a clean code snippet such as function Button({ label = "Click Me" }), with modern developer UI, rounded cards, subtle gradients, and minimal text.

Caption: React props use default values when a destructured prop is undefined.

Alt text: React props default value flow showing a provided value and a fallback value.

Practice Exercise

Create a reusable ProfileCard component.

Give these props default values:

• name should default to "Guest".
• role should default to "Developer".
• location should default to "Not specified".
• skills should default to an empty array.

Start with:

function ProfileCard({
  name = "Guest",
  role = "Developer",
  location = "Not specified",
  skills = []
}) {
  // Build your component here
}

Then:

• Display the name.
• Display the role.
• Display the location.
• Render all skills using map().
• Show "No skills listed" when the array is empty.
• Create one profile with all props.
• Create another profile with only the name prop.
• Create a third profile without any props.

As an additional challenge, add an optional onContact callback with a suitable default or conditional behavior.

Props Default Values Cheat Sheet

Situation	Example
String default	{ name = "Guest" }
Number default	{ count = 0 }
Boolean default	{ active = false }
Array default	{ items = [] }
Object default	{ user = {} }
Children default	{ children = <p>Empty</p> }
Function default	{ onClick = () => {} }
Missing prop	Default can be used
undefined	Default can be used
null	Default is not used

Key Takeaways

• Props can have default values.
• Default values provide fallback behavior when a prop is undefined.
• The most common modern approach is destructuring with a default value.
• Default values can be used with strings, numbers, booleans, arrays, objects, functions, and children.
• A default value does not replace null.
• Defaults can make reusable components safer and easier to use.
• Array props often benefit from an empty-array default when that matches the component’s expected behavior.
• Defaults should match the expected type and meaning of the prop.
• Don’t use defaults to hide important missing-data or application errors.
• Required data should remain required when a component cannot function correctly without it.

The core pattern to remember is:

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

When props are provided, the component uses those values. When a prop is undefined, the default value provides a fallback.

Default values are a small feature, but they become very useful when building reusable, flexible, and predictable React components.