title: React create element with key
body: <p>I'm attempting to render an array of react components without JSX with keys. The problem Unfortunately, I'm dealing with a JS error when i attempt to set the keys inside of my array:</p>
  
  <pre><code>Uncaught (in promise) TypeError: Cannot assign to read only property 'key' of object '#&lt;Object&gt;'
  </code></pre>
  
  <p>Here is the code:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Test extends Component {
  
    mapChildObjects = () =&gt; {
      const { children } = this.props;
      let arr = [];
  
      for (let i = 0; i &lt; children.length; i++) {
        arr.push(React.createElement(children[i]));
        arr[i].key = i;
      }
      return arr;
    }
  
    render() {
  
      return (
        &lt;div&gt;
          &lt;div className={s.content}&gt;
            {this.mapChildObjects()}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  
  export default Test
  
  </code></pre>
  
  <p>After reading the documentation: <a href="https://reactjs.org/docs/react-without-jsx.html" rel="noreferrer">https://reactjs.org/docs/react-without-jsx.html</a>, but was unable to find examples of adding keys inside of <code>createElement</code>.</p>
  
  <p>Note: this renders fine; the issue is not with the rendering of the component, but with the ability to add keys creating elements.</p>