Setting Default Component Props

Default props can be set when a component is being defined by using PropTypes prop-types modules or prop-types.js file.

PropTypes defines type and which props are required. This benefits the future you using your component in two ways:

  • You can easily open up a component and check which props are required and what type they should be.
  • When things get messed up React will give you an awesome error message in the console, saying which props is wrong/missing plus the render method that caused the problem.

Usage

In the example below we define props type and validation:

class MyComponent extends React.Component {
  render() {
    // ... Do things with the props
  }
}

MyComponent.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number.isRequired,
}

MyComponent.defaultProps = {
  name: 'Brian',
  age: 30
}

And more awesome, if we can’t find a propTypes that suits our needs we can write own with regex or shapes:

MyComponent.propTypes = {
  email: function(props, propName, componentName) {
    if (!/emailRegex/.test(props[email])) {
      return new Error('Give me a real email!');
    }
  },
}

In the example below, the MyComponent component has a default value for the name prop.

See the Pen deaJYV by Bunlong (@Bunlong) on CodePen.

Default props will be set on this.props if no prop is sent into the component.

Note:

  • The defaultProps is invoked once and cached when the component is created.
  • The defaultProps is run before any instances are created.
  • Any objects returned by defaultProps will be shared across instances, not copied.

Updated: