Почему не работает react компонент?

Есть простой react компонент но при попытке отрендерить его у меня падает ошибка синтаксиса, хотя все скобки вроде открыты и закрыты где надо:

Uncaught SyntaxError: http://localhost:3000/js/app.js: Unexpected token (27:2)   25 |       )   26 |     }
> 27 |   };
     |   ^   28 |    29 |   render: function() {   30 |     return (

Помогите пожалуйста разобраться почему так происходит. Как я понимаю этот код: есть функция getNewsData в ней map заполняет массив и функция getNewsData должна вернуть этот массив. В чем моя ошибка объясните пожалуйста. Спасибо.

Сам компонент:

var News = React.createClass({
  getNewsData: function() {
    return  this.props.data.map(function(item, index) {
      return (
        <div key={index}>
          <p className="news__author">{item.author}:</p>
          <p className="news__text">{item.text}</p>
        </div>
      )
    }
  };
  render: function() {
    return (
      <div className="news">
        {this.getNewsData()}
      </div>
    );
  }
});
var Comments = React.createClass({
    render: function() {
      return (
        <div>
          comments
        </div>
      );
    }
});
var App = React.createClass({
  render: function() {
    return (
      <div>
        Всем привет, я компонент App!
        <Comments />
        <News data={my_news}/>
      </div>
    );
  }
});