Как перебрать массив?

Question

[Username]

Добрый день. Как можно осуществить перебор массива строк?
Как я делал для массива объектов:

var News = React.createClass({
  render: function() {
    var data = this.props.data;
    var newsTemplate;

      newsTemplate = data.map(function(item, index) {
        return (
          <div key={index}>
            {item} 
          </div>
        )
      })
    return (
        {newsTemplate}
    );
  }
});

• 
  Мои попытки перебрать массив строк:
  

  var News = React.createClass({
    render: function() {
      var data = ['One', 'Two'];
      var newsTemplate;
  
        newsTemplate = data.forEach(function(item, index) {
          return (
            <div key={index}>
              {item} 
            </div>
          )
        })
      return (
          {newsTemplate}
      );
    }
  });

  
  
  
  
• 
  Мои попытки вставить числа от 9 до 17:
  

  var News = React.createClass({
    render: function() {
      var newsTemplate;
  
        for (var i = 9; i <= 17; i++) {
              timelineTemplate = <p>{i}</p>
          }
      return (
          {newsTemplate}
      );
    }
  });

  
  
  

Нужно выполнить две эти задачи, но и в том и в другом случае появляется следующая ошибка:

Comments

[Aves]

В ошибке же написано, в чем она заключается. Метод render должен вернуть один элемент или null. Нужно обернуть массив например в div: return <div>{newsTemplate}</div>

[Username]

Aves: Можно как-то без дива обойтись иначе летит вёрстка

[Aves]

Username: только если использовать массив в методе render компонента выше.

Answer 1

[Дмитрий]

Попробуйте сделать так: оберните ваш {newsTemplate} в тег - div, в return

Answer 2

[Islam Ibakaev]

вроде как .createClass() уже или скоро deprecated
привыкай к es6 классам

Comments

[Username]

А как правильно?

[Islam Ibakaev]

Username: как-то так

class NewsList extends React.Component {
	render() {
		const { data } = this.props;
		const news = data.map((item, i) => 
			<News item={item} key={item.title + i} />
		);
		
		return (
			<div className="news-list">
				{news}
			</div>
		);
	}
}


function News({ item }) {
	return (
		<div className="news">
			<h2 className="news__title">{item.title}</h2>	
			<p className="news__text">{item.text}</p>
		</div>
	);
}