Default Props

A large benefit of React is creating and consuming highly reusable components. If you think about strategies for creating reusable components, a very important aspect is through props. You want a component to be able to work for more than just your very specific use case. For example, if we were creating a reusable <Loading /> component, we would want the user to be able to specify certain properties that are specific to their application. For example, you'd want the user to be able to specify their own styles or specify what the actual loading text will be. But what if some users don't want to specify their own specific style or loading text but instead want to use some default text? This is where defaultProps comes into play. defaultProps allows you to, as you guessed, specify what the default props will be in a component if those specific props aren't specified when the component is invoked.

class Loading extends React.Component {
  render () {
    ...
  }
}
Loading.defaultProps = {
  text: 'loading',
  styles: {color: 'red'}
}
  <Loading /> // default
  <Loading text='One second' styles={{color: 'green'}} /> // override
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License