[Solved]-How to set component default props on React component-Reactjs

class example extends react.component {
  render() {
    return <h1>{this.props.text}</h1>;
  }
}

example.defaultprops = { text: 'yo' }; 

for a function type prop you can use the following code:

addaddresscomponent.defaultprops = {
    callbackhandler: () => {}
};

addaddresscomponent.proptypes = {
    callbackhandler: proptypes.func,
};

use a static defaultprops like:

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 wish to check the types, see how to use proptypes in treyhakanson's or ilan hasanov's answer, or review the many answers in the above link.

you can set the default props using the class name as shown below.

class greeting extends react.component {
  render() {
    return (
      <h1>hello, {this.props.name}</h1>
    );
  }
}

// specifies the default values for props:
greeting.defaultprops = {
  name: 'stranger'
};

you can use the react's recommended way from this link for more info

if you're using a functional component, you can define defaults in the destructuring assignment, like so:

export default ({ children, id="menu", side="left", image={menu} }) => {
  ...
};

you can also use destructuring assignment.

class addaddresscomponent extends react.component {
  render() {

    const {
      province="insertdefaultvaluehere1",
      city="insertdefaultvaluehere2"
    } = this.props

    return (
      <div>{province}</div>
      <div>{city}</div>
    )
  }
}

i like this approach as you don't need to write much code.

first you need to separate your class from the further extensions ex you cannot extend addaddresscomponent.defaultprops within the class instead move it outside.

i will also recommend you to read about the constructor and react's lifecycle: see component specs and lifecycle

here is what you want:

import proptypes from 'prop-types';

class addaddresscomponent extends react.component {
  render() {
    let { provincelist, citylist } = this.props;
    if(citylist === undefined || provincelist === undefined){
      console.log('undefined props');
    }
  }
}

addaddresscomponent.contexttypes = {
  router: proptypes.object.isrequired
};

addaddresscomponent.defaultprops = {
  citylist: [],
  provincelist: [],
};

addaddresscomponent.proptypes = {
  userinfo: proptypes.object,
  citylist: proptypes.array.isrequired,
  provincelist: proptypes.array.isrequired,
}

export default addaddresscomponent;

for those using something like babel stage-2 or transform-class-properties:

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

as of react v15.5, proptypes was moved out of the main react package (link):

import proptypes from 'prop-types';

edit

as pointed out by @johndodo, static class properties are actually not a part of the es7 spec, but rather are currently only supported by babel. updated to reflect that.