ES6 classes and ReactJS: implementing propTypes

Question

I had a problem to define propTypes for my React class. I ran into solution that doesn't feel right:

let React = require('react')
let CallerCard = require('caller-card')

class CallerDetailsPanel {
  render() {
    return (
      <div className='caller-details-panel'>
        <CallerCard person={this.props.callerData.owner} />
        <CallerCard person={this.props.callerData.user} />
      </div>
    )
  }
}

CallerDetailsPanel.prototype.propTypes = {
    callerData: React.PropTypes.object
}

module.exports = React.createClass(CallerDetailsPanel.prototype)

Is this correct approach or how propTypes should be defined? If I try to define them inside class, I get a Parse error from 6to5 / esprima on console.

Answer 1

I think you're just supposed to do this:

CallerDetailsPanel.propTypes = { callerData: React.PropTypes.object }

This feels a little backwards, but the React team has done this with the hope that in the future, with ES7, you will be able to use a syntax that looks something like this:

class CallerDetailsPanel {
  static propTypes = { callerData: React.PropTypes.object }
  render() {
    return (
      <div className='caller-details-panel'>
        <CallerCard person={this.props.callerData.owner} />
        <CallerCard person={this.props.callerData.user} />
      </div>
    )
  }
}