Iterating over an array of react components

iterateJSX.js

import { Component } from 'react';

import Foo from 'components/Foo';
import Bar from 'components/Bar';
import Baz from 'components/Baz';

class Container extends Component {
  render() {
    const components = [
      Foo,
      Bar,
      Baz
    ];
    
    return (
      <div>
        {components.map((component, i) =>
          <div key={`component-${i}`>
            { React.createElement(component, { props: this.props }) }
          </div>
        )}
      </div>
    );
  }
}