How to set component default props on React component

Question

I use the code below to set default props on a React component but it doesn t work  In the render   method  I can see the output  undefined props  was printed on the browser console  How can I define a default value for the component props   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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

For a function type prop you can use the following code   AddAddressComponent defaultProps         callBackHandler       gt         AddAddressComponent propTypes         callBackHandler  PropTypes func

User · Answer

class Example extends React Component     render         return  lt h1 gt  this props text  lt  h1 gt          Example defaultProps     text   yo

User · Answer

You can also use Destructuring assignment   class AddAddressComponent extends React Component     render          const         province  insertDefaultValueHere1         city  insertDefaultValueHere2          this props      return          lt div gt  province  lt  div gt         lt div gt  city  lt  div gt                I like this approach as you don t need to write much code

User · Answer

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       gt

User · Answer

You forgot to close the Class bracket    x000D   x000D  class AddAddressComponent extends React Component   x000D    render     x000D      let  provinceList cityList    this props x000D      if cityList     undefined    provinceList     undefined   x000D        console log  undefined props   x000D        else   x000D        console log  defined props   x000D        x000D   x000D      return   x000D         lt div gt rendered lt  div gt  x000D        x000D      x000D    x000D   x000D  AddAddressComponent contextTypes     x000D    router  React PropTypes object isRequired x000D     x000D   x000D  AddAddressComponent defaultProps     x000D    cityList      x000D    provinceList      x000D     x000D   x000D  AddAddressComponent propTypes     x000D    userInfo  React PropTypes object  x000D    cityList  React PropTypes array isRequired  x000D    provinceList  React PropTypes array isRequired  x000D    x000D   x000D  ReactDOM render  x000D     lt AddAddressComponent   gt   x000D    document getElementById  app   x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   lt div id  app    gt  x000D   x000D   x000D

User · Answer

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

[reactjs] How to set component default props on React component

Examples related to reactjs

Examples related to ecmascript-6