title: React - How to add "key" when pushing to an array
body: <p>React v15.1</p>
  
  <p>I am creating a table with a variable number of rows, depending on the data provided via <code>props</code>. Here is where I am (and it works fine):</p>
  
  <pre><code>getRows = () =&gt; {
    const rows = [];
  
    for (const col in this.props.tableRows) {
      if ({}.hasOwnProperty.call(this.props.tableRows, col)) {
          rows.push(React.cloneElement(this.props.tableRows[col], {}));
      }
    }
    return rows;
  }
  </code></pre>
  
  <p>I am working on making the console warnings disappear. This old favorite is appearing <code>Each child in an array or iterator should have a unique "key" prop. Check the render method of 'TableData'.</code></p>
  
  <p><strong>What is the best way to add a key to cloned elements that I am pushing to an empty array?</strong> </p>
  
  <p><strong>OR</strong> is there a better way to handle this data on dynamically-generated table rows?</p>
  
  <p>This is for an upload dialog for contact information I am using in many places. It successfully performs as expected, just need to add a key...or make it even better.</p>