Как вывести массив строк в компоненте React после условия?

Question

[ChrisJonson]

Компонент выводит статьи из json файла. Некоторые статьи хранятся обычной строкой, а некоторые в виде массива строк (чтобы разделить на параграфы). В рендере вызывается функция в которой условие проверяет, обычная строка там или массив, и в зависимости от этого по разному выводит.

Если статья обычной строкой, то выводится нормально. А если в виде массива строк, то не хочет рендерить, хоть и ошибки не выскакивают и в консоль логе каждую строку выводит нормально. Почему так? Как отрендерить массив после условия?

var ArticleContent = React.createClass({
	renderContent: function(){
		if (typeof this.props.content == 'string'){
      // 1. цельная строка без абзацев спокойно рендерится  
			return <p>{this.props.content}</p> 
		} else {
			<div>
				{
			       this.props.content.map(function(item, i){
             // 2. массив строк: каждая строка выводится в консоль, но не рендерится
				     console.log(item);
			       return <p key={i}>{item}</p>
				 })
				}
				 
			 </div>
		}
	},
	render: function(){
		return (
			<div>
				{this.renderContent()}
			</div>
		)
	}
});

Answer 1

[Roman]

Array.map возвращает массив

Comments

[ChrisJonson]

я же так и сделал this.props.content.map

Answer 2

[Дмитрий Беляев]

блок после else ничего не возвращает, надо так:

var ArticleContent = React.createClass({
  renderContent: function(){
    if (typeof this.props.content == 'string'){
      // 1. цельная строка без абзацев спокойно рендерится  
      return <p>{this.props.content}</p> 
    } else {
      return (
        <div>
        {
             this.props.content.map(function(item, i){
                // 2. массив строк: каждая строка выводится в консоль, но не рендерится
                console.log(item);
                return <p key={i}>{item}</p>
             }).join('');
        }
        </div>
      );
    }
  },
  render: function(){
    return (
      <div>
        {this.renderContent()}
      </div>
    );
  }
});

Comments

[ChrisJonson]

ну я поменял if с else местами и ничего не изменилось

[everliving]

ChrisJonson: https://jsfiddle.net/69z2wepo/40394/ у вас слишком много лишнего

[ChrisJonson]

everliving: да, спасибо. Еще проблему решил тем, что везде поставил массивы, и убрал условия. Действительно, с какой стати одинаковые поля у меня разных типов будут.