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