CODEWITHSUNDEEP
reactjs
THpubs
THpubs

Reputation: 8172

How to correctly add propTypes to a React component in ES6?

I'm writing my React component as a ES6 class. I tried to add propTypes and Meteor threw this error A semicolon is required after a class property. Here's my component :

class MainLayout extends Component {
  propTypes: {
    content: React.PropTypes.element
  }

  componentDidMount () {
    $(window).load(() => {
      $('.flexslider')
      .flexslider(
        { animation: 'fade', animationSpeed: 1500, controlNav: false }
      );
    });
  }

  render () {
    return (
      <div>
        <Header/>
        {/* Content */}
        { this.props.content }
      </div>
    );
  }
}

How can I fix this?

Upvotes: 3

Views: 1978

Answers (1)

Nathan Hagen
Nathan Hagen

Reputation: 12780

With es6 class synax, you cannot set static properties on classes in the class definition.

So basically, instead of 

class MainLayout extends Component {
  propTypes: {
    content: React.PropTypes.element
  }
  ..
}

it should be 

class MainLayout extends Component {
  ...
}

MainLayout.propTypes = {
  content: React.PropTypes.element
}

With es7 classes, you can define proptypes like this, however, which is more in line with what you'd expect:

class MainLayout extends Component {
  static propTypes = {
    content: React.PropTypes.element
  }
  ..
}

Upvotes: 8

Related Questions