Динамически создаём React-компоненты

Иногда нужно создавать React-компонент динамически и даже в цикле. Но ren­der(), само собой, не желает выполнять циклы и начинает ругаться.

Чтобы создавать компоненты динамически, пишите по этому образцу. В зависимости от фреймворка можно заменить вызов на создание класса и отформатировать arrow-функциями.

let Block = React.createClass({
  createImage: function (image) {
    return <Image source={image} key={image} />;
  },

  createImages: function (images) {
    return images.map(this.createImage);
  },

  render: function () {
    return (
      <div className="container">
        <div className="row">
          <div className="col-sm-12 text-center">

            {this.createImages(data.images)}

          </div>
        </div>
      </div>
    );
  }
});