How to set default component details for a React component

Question

I use the code below to set the default details for the React component, but it does not work. In the render () method, I see that the output of "undefined props" was printed on the browser console. How to determine the default value for the component details?

export default class AddAddressComponent extends Component { render() { let {provinceList,cityList} = this.props if(cityList === undefined || provinceList === undefined){ console.log('undefined props') } ... } AddAddressComponent.contextTypes = { router: React.PropTypes.object.isRequired } AddAddressComponent.defaultProps = { cityList: [], provinceList: [], } AddAddressComponent.propTypes = { userInfo: React.PropTypes.object, cityList: PropTypes.array.isRequired, provinceList: PropTypes.array.isRequired, } 

Answer 1

You forgot to close the Class bracket.

 class AddAddressComponent extends React.Component { render() { let {provinceList,cityList} = this.props if(cityList === undefined || provinceList === undefined){ console.log('undefined props') } else { console.log('defined props') } return ( <div>rendered</div> ) } } AddAddressComponent.contextTypes = { router: React.PropTypes.object.isRequired }; AddAddressComponent.defaultProps = { cityList: [], provinceList: [], }; AddAddressComponent.propTypes = { userInfo: React.PropTypes.object, cityList: React.PropTypes.array.isRequired, provinceList: React.PropTypes.array.isRequired, } ReactDOM.render( <AddAddressComponent />, document.getElementById('app') ) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app" /> 

Answer 2

For those who are looking for an ES7 solution (step 1):

 import React, { PropTypes, Component } from 'react'; export default class ExampleComponent extends Component { static contextTypes = { // some context types }; static propTypes = { prop1: PropTypes.object }; static defaultProps = { prop1: { foobar: 'foobar' } }; ... } 

---

Update

Starting with React v15.5, PropTypes been ported from the main React package ( link ):

 import PropTypes from 'prop-types'; 

Answer 3

First you need to separate your class from further extensions, since you cannot extend AddAddressComponent.defaultProps inside the class , and not move it outside.

I will also recommend you read about the Constructor and the React life cycle: see "Component Features and Life Cycle"

Here is what you want:

 class AddAddressComponent extends React.Component { render() { let { provinceList, cityList } = this.props; if(cityList === undefined || provinceList === undefined){ console.log('undefined props'); } } } AddAddressComponent.contextTypes = { router: React.PropTypes.object.isRequired }; AddAddressComponent.defaultProps = { cityList: [], provinceList: [], }; AddAddressComponent.propTypes = { userInfo: React.PropTypes.object, cityList: PropTypes.array.isRequired, provinceList: PropTypes.array.isRequired, } export default AddAddressComponent; 

Answer 4

use static defaultProps, for example:

 export default class AddAddressComponent extends Component { static defaultProps = { provinceList: [], cityList: [] } render() { let {provinceList,cityList} = this.props if(cityList === undefined || provinceList === undefined){ console.log('undefined props') } ... } AddAddressComponent.contextTypes = { router: React.PropTypes.object.isRequired } AddAddressComponent.defaultProps = { cityList: [], provinceList: [], } AddAddressComponent.propTypes = { userInfo: React.PropTypes.object, cityList: PropTypes.array.isRequired, provinceList: PropTypes.array.isRequired, } 

Taken from: https://github.com/facebook/react-native/issues/1772

If you want to check types, see how to use PropTypes in treyhakanson or Ilan Hasanov, or see the many answers in the link above.