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,
}

Nathan Arthur · Accepted Answer · 2017-08-22 19:38:38Z

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" />

treyhakanson · Accepted Answer · 2018-06-24 18:29:04Z

103

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.

edited Jun 24, 2018 at 18:29

answered Jun 19, 2017 at 18:13

treyhakanson

5,0112 gold badges20 silver badges35 bronze badges

4 Comments

farmcommand2 Over a year ago

thank for the answer, but i wanted to learn a bit more about it so had a look at react/native doc and couldn't find them, where is the doc for that?

treyhakanson Over a year ago

I don't think its explicitly in the React docs, but if you understand what static class variables are it makes sense, so I suggest reading about them on MDN. Basically, the syntax in the documentation is equivalent to this because both are adding information about the props to the class itself, not the individual instances.

tibi Over a year ago

the import is changed to: import PropTypes from 'prop-types';

johndodo Over a year ago

@treyhakanson The MDN link only talks about static methods, not variables. I couldn't find a reference for static class variables, except for Babel. Is this an accepted ES7 property?

Brian Burns · Accepted Answer · 2019-04-06 10:47:13Z

28

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} }) => {
  ...
};

answered Apr 6, 2019 at 10:47

Brian Burns

22.4k10 gold badges93 silver badges80 bronze badges

3 Comments

Guy Park Over a year ago

Kudos for the help, but I think he's asking for the class component. From personal experience I've find it frustrating from always getting answers relating to the functional component....just saying.

damdeez Over a year ago

@GuyPark lol, weird but ok

hamzeh_pm Over a year ago

how to combine PropTypes.oneOf(['first', 'second', 'third']) with default

Ilanus · Accepted Answer · 2018-09-12 08:00:39Z

17

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;

edited Sep 12, 2018 at 8:00

answered Aug 5, 2016 at 10:56

Ilanus

6,9585 gold badges15 silver badges37 bronze badges

3 Comments

ivarni Over a year ago

Are you sure they need the constructor and componentWillReceiveProps? Seems to me the OP just forgot a closing bracket for their class declaration.

Ilanus Over a year ago

@ivarni not necessarily but it's important he understand the life-cycle, constructor, and the class extensions. so he will know what his doing. so i added few external links

ivarni Over a year ago

Fair enough, I just think saying "you need to" isn't strictly correct. I'd rather say something along the lines of "you can add these methods to observe the lifecycle". Otherwise, good answer :)

Sam Henderson · Accepted Answer · 2018-01-29 00:24:48Z

10

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.

answered Jan 29, 2018 at 0:24

Sam Henderson

4895 silver badges7 bronze badges

1 Comment

Gerard Brull Over a year ago

The problem I see here is that you might want to use default props in multiple methods.

Rohith Murali · Accepted Answer · 2018-09-09 17:02:00Z

6

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

edited Sep 9, 2018 at 17:02

answered Apr 26, 2018 at 16:08

Rohith Murali

5,6692 gold badges27 silver badges28 bronze badges

Comments

Brandon Keith Biggs · Accepted Answer · 2017-11-12 14:07:16Z

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.

Wolfack · Accepted Answer · 2018-11-05 10:19:00Z

4

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

AddAddressComponent.defaultProps = {
    callBackHandler: () => {}
};

AddAddressComponent.propTypes = {
    callBackHandler: PropTypes.func,
};

answered Nov 5, 2018 at 10:19

Wolfack

2,8191 gold badge31 silver badges51 bronze badges

Comments

Lepkem · Accepted Answer · 2020-05-03 11:40:41Z

2

class Example extends React.Component {
  render() {
    return <h1>{this.props.text}</h1>;
  }
}

Example.defaultProps = { text: 'yo' };

answered May 3, 2020 at 11:40

Lepkem

2551 gold badge2 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to set component default props on React component

9 Answers 9

Comments

4 Comments

3 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

4 Comments

3 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related