react-native: getDefaultProps doesn't work with ES6 syntax; warning is not helpful

For future visitors, ES6 syntax for latest version should be ( none of the above ):

Revised

ReviewsList.propTypes = {
   reviews : React.PropTypes.array.isRequired,
}

ReviewsList.defaultProps = {
      reviews: [],
}

for future users here is es2015 syntax for defaultprops…

static get defaultProps() {
  return {
       yourkey: yourvalue
  }
}

defaultProps just needs to be a static property on the component class. How you want to do this is up to you.

Static property:

class C1 extends React.Component {
  static defaultProps = {
    prop: 'hello',
  };
}

Static getter:

class C2 extends React.Component {
  static get defaultProps() {
    return {
      prop: 'hello',
    };
  }
}

Assign a property:

class C3 extends React.Component {
}
C3.defaultProps = {
  prop: 'hello',
};

  static defaultProps = {
      reviews: []
  }

should work

try this

found solution from http://www.newmediacampaigns.com/blog/refactoring-react-components-to-es6-classes

Original

class ReviewsList extends Component {
  propTypes: {
    reviews : React.PropTypes.array.isRequired,
  }
  getDefaultProps() {
    return {
      reviews: [],
    };
  }
  render() {
    var reviewItems = this.props.reviews.map(function (review) {  // ERROR
      return (
        <RecipeReviewItem key={review.objectId} reviewText={review.reviewText}></RecipeReviewItem>
      )
    });

    return (
      <View>{reviewItems}</View>
    );
  }
}

New

class ReviewsList extends Component {
  render() {
    var reviewItems = this.props.reviews.map(function (review) {  // ERROR
      return (
        <RecipeReviewItem key={review.objectId} reviewText={review.reviewText}></RecipeReviewItem>
      )
    });

    return (
      <View>{reviewItems}</View>
    );
  }
}

ReviewsList.propTypes: {
   reviews : React.PropTypes.array.isRequired,
}
 ReviewsList.getDefaultProps() {
    return {
      reviews: [],
    };
}

static get defaultProps() { return { yourkey: yourvalue } }

Upon inspecting the console log I got this message:

"Warning: getDefaultProps was defined on Blah, a plain JavaScript class. This is only supported for classes created using React.createClass. Use a static property to define defaultProps instead."

What does that even mean? What’s a static property? How do you ‘define defaultProps’? An example is worth its weight in gold here.

I’ve just learned that ES6 has the static keyword, but seriously, what’s a static property?

works like charm with es6

class ReviewsList extends Component {
  static propTypes = {
     reviews : PropTypes.array.isRequired,
  };
  static defaultProps = {
     reviews: [],
  };
  render() {
    var reviewItems = this.props.reviews.map(function (review) {  // ERROR
      return (
        <RecipeReviewItem key={review.objectId} reviewText={review.reviewText}></RecipeReviewItem>
      )
    });

    return (
      <View>{reviewItems}</View>
    );
  }
}

@AlexChaseJones your suggestion works like a charm.

People on facebook could update their official docs at http://facebook.github.io/react-native/docs/using-navigators.html

Thanks @cyprusglobe. Fantastic answer, and a really informative link. It’s working very well now, thanks. When RN moves towards ES6 in earnest the documentation examples must be updated to show this.

It’s at Stage 2 and the champion is currently at Facebook. I think the syntax might change (or might not) but you could write a codemod or similar source transformer to transpile from old syntax to new if that happened.

isRequired doesn’t throw an error when the prop isn’t provided… I’ve had this issue with RN ES6 for a long time. Am I missing something?

I’ve tried

  static defaultProps: {
      reviews: []
  }

and

  static defaultProps() {
    return {
      reviews: []
    };
  }

But neither of these have worked.