title: In React how to add key prop to element passed as Object
body: <p>Approximately the code looks like this (CoffeeScript)</p>
  
  <pre><code>//In Parent component
  
  render: () -&gt;
  
    mycomp = &lt;SomeComponent some_prop="something" /&gt;
  
    &lt;ChildComponent passedComp = mycomp /&gt;
  
  
  //In Child component
  
  render: () -&gt;
  
   someContent = [passedComp, &lt;AnotherComp key={2} /&gt;]
  
  
   &lt;div&gt;
     {someContent}
   &lt;/div&gt;
  </code></pre>
  
  <p>This generates a warning about missing key in the array in Child component. </p>
  
  <p>The problem is how to add key={1} to passedComp in Child component. I can't do it in the render method of the Parent (alongside some_prop) because I can't know at this point what key should be. I need to add the key prop in the Child component - but here passedComp is already an object .</p>
  
  <p>How can I modify passedComp to have a key?</p>
  
  <ul>
  <li>Updated:</li>
  </ul>
  
  <p>I have </p>
  
  <pre><code>someContent = [&lt;span key={1}&gt;{passedComp}&lt;/span&gt;, &lt;AnotherComp key={2} /&gt;]
  </code></pre>
  
  <p>which gets rid of the React warning but the extra span breaks my (well react-bootstrap's) CSS. Is there a better solution?</p>