Default props

Learn to use a default value when a prop is missing.

Default props

Sometimes a prop might not arrive. To keep the component safe you give a default value. It's written inside destructuring with =: ({ '{ name = "Guest" }' }).

This is JavaScript's default parameter feature. If the name prop is missing or undefined, "Guest" is used automatically.

Default values make the component flexible: they define a fallback behaviour for non-required props.

Default props benefits

Default props make the component robust. For example, an Avatar called without a name prop shows "Guest" by default.

This approach is also common in API design: setting defaults for optional props reduces the caller's burden.

The same syntax works for several props: ({ '{ name = "Guest", role = "User" }' }).

Exercise Avatar with default name

Complete the skeleton. Write a component called Avatar that takes ({ '{ name = "Misafir" }' }) as parameter and returns <p>{name}</p>. Don't forget to export.

Show example solution

function Avatar({ name = "Misafir" }) {
  return <p>{name}</p>;
}

export default Avatar;

Test yourself

When is a default prop used?
- On a render error
- Whenever the prop arrives
- When the prop is missing
- When state changes
Show answer

When the prop is missing — A default prop kicks in when the prop is missing.

Default value syntax

The default for name is ____.

Show answer

The default for name is "Misafir".

Match default props examples

name = "Guest"

One default
role = "User"

Second default
{ name }

Required prop
props

Whole object

Next lesson: Summary - Props

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies