title: I can't figure out a way to set the key on list elements from the container even though the container can very well set any other properties
body: <p>Ok so here is a simplification of my real-world use-case. Basically I have a complicated layout and I pass the layout component to the child so that it renders itself within it and then the parent layout displays it as its children. Works great, except I use this in a loop and I cannot figure out how to set the key on the children from the parent.</p>
  <p>It's strange because I can set other properties without any issues. In the example below, the &quot;id&quot; property is correctly set from the list, but the console emits the warning:</p>
  <p><strong>Warning: Each child in a list should have a unique &quot;key&quot; prop.</strong></p>
  <pre><code>const Child = Parent =&gt; (
    &lt;Parent&gt;
      The child is reponsible
      &lt;br /&gt;
      for writing the contents.
    &lt;/Parent&gt;
  );
  
  const present = (title) =&gt; {
    const Tag = ({ children }) =&gt; (
      &lt;article id={title} key={title}&gt;
        &lt;h1&gt;{title}&lt;/h1&gt;
        {children}
      &lt;/article&gt;
    );
    
    return Child(Tag);
  };
  
  const app = (
    &lt;div&gt;
      {[
        'hello',
        'this',
        'is',
        'a list'
      ].map(present)}
    &lt;/div&gt;
  );
  
  ReactDOM.render(
    app,
    document.getElementById('root')
  );
  </code></pre>
  <p><a href="https://codepen.io/djfm/pen/YzVybLR" rel="nofollow noreferrer">here's a demo of that code on codepen</a></p>
  <p>Is there any way to accomplish what I'm trying to do?</p>
  <p>This may seem like an over-complicated way to render a template, I know, but I have - I <em>think</em> - a good real-world use-case.</p>