title: How to render an array of JSX elements (React components)
body: <p>I'm trying to render an array of named react components, say <code>&lt;Foo /&gt;</code>, <code>&lt;Bar /&gt;</code>, and <code>&lt;Baz /&gt;</code>,for example.</p>
  
  <pre><code>const rendered = [];
  const getItems = this.props.itemslist.map((item, key) =&gt; {
  const TYPE = item.type;
  rendered.push(&lt;TYPE data-attributes={attributes} key={key} /&gt;);
  });
  return (
    &lt;Grid&gt;
      &lt;Row&gt;
      {rendered}
      &lt;/Row&gt;
    &lt;/Grid&gt;
  );
  </code></pre>
  
  <p>I can iterate over my array and see in the console the array of elements, but they are rendered as empty html elements "<code>&lt;foo&gt;&lt;/foo&gt;&lt;bar&gt;&lt;/bar&gt;&lt;baz&gt;&lt;/baz&gt;</code>", and not the actual components.
  Why is this happening and, more importantly, how can I get the COMPONENTS to render?</p>