Default props in React

Introduction

Default props let you set a fallback value for a component's property. This helps your component work well even if some props are missing.

You want a button to show 'Click me' if no label is given.

A user profile should show 'Guest' if no name is provided.

A card component should have a default background color if none is set.

You want to avoid errors when a prop is not passed to a component.

Syntax

React

function MyComponent({ title = 'Default Title' }) {
  return <h1>{title}</h1>;
}

You can set default props by giving default values in the function parameter.

This works only for functional components using destructuring.

Examples

This component shows 'Hello, Friend!' if no name is passed.

React

function Greeting({ name = 'Friend' }) {
  return <p>Hello, {name}!</p>;
}

The button shows 'Click me' by default if no label is given.

React

const Button = ({ label = 'Click me' }) => {
  return <button>{label}</button>;
};

The box will be blue if no color prop is passed.

React

function Box({ color = 'blue' }) {
  return <div style={{ backgroundColor: color, width: '100px', height: '100px' }}></div>;
}

Sample Program

This app shows a welcome message. The first message uses the passed user 'Alice'. The second uses the default 'Guest' because no user prop is given.

React

import React from 'react';

function WelcomeMessage({ user = 'Guest' }) {
  return <h2>Welcome, {user}!</h2>;
}

export default function App() {
  return (
    <>
      <WelcomeMessage user="Alice" />
      <WelcomeMessage />
    </>
  );
}

Important Notes

Default props help avoid errors from missing props.

Using default values in function parameters is the modern way in React functional components.

For class components, defaultProps is used, but functional components prefer default parameters.

Summary

Default props provide fallback values for missing props.

Set default props using function parameter defaults in functional components.

This makes components safer and easier to use.