Этап 2 ecmaScript, неожиданный токен при деструктурировании внутри класса

Question

Используя этап 2, у меня есть компонент React с prop.contest, который соответствует этому PropType

ContestPreview.propTypes = {
  contest: PropTypes.shape({
    id: PropTypes.number,
    categoryName: PropTypes.string,
    contestName: PropTypes.string,
  }).isRequired,
};

И компонент это:

class ContestPreview extends React.Component {
  { contest } = this.props;
  { contestName, categoryName } = contest;

  handleClick = () => {
    console.log(contestName);
  };

  render() {

    return (
      <div className="link ContestPreview" role="button" onClick={this.handleClick}>
        <div className="category-name">
          {categoryName}
        </div>
        <div className="contest-name">
          {contestName}
        </div>
      </div>
    );
  }
}

Проблема в том, что я получаю ошибку от eslint unexpected token что указывает на открытие {моего разрушительного задания. В ES6 мне было удобно создавать конструктор и устанавливать там свои свойства. Это нормально для текущего состояния stage2? Я могу решить это

contest = this.props.contest; и ссылки this.contest.categoryName вместо. Однако мои правила отбора действительно жалуются на реакцию / деструктуризацию-назначение. Код работает нормально. Я использую только этап 2, потому что курс Lynda.com, который я делаю, использует это.

Мой вопрос: каков наилучший подход к тому, чтобы заставить деструктурировать работать? Не уверен на данный момент, если бы я изменил конфигурацию проекта, как мне пришлось бы изменить вещи обратно в ES6.