title: Understanding unique keys for array children in React.js
body: <p>I'm building a React component that accepts a JSON data source and creates a sortable table.<br>
  Each of the dynamic data rows has a unique key assigned to it but I'm still getting an error of: </p>
  
  <blockquote>
    <p>Each child in an array should have a unique "key" prop.<br>
    Check the render method of TableComponent.</p>
  </blockquote>
  
  <p>My <code>TableComponent</code> render method returns:</p>
  
  <pre><code>&lt;table&gt;
    &lt;thead key="thead"&gt;
      &lt;TableHeader columns={columnNames}/&gt;
    &lt;/thead&gt;
    &lt;tbody key="tbody"&gt;
      { rows }
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The <code>TableHeader</code> component is a single row and also has a unique key assigned to it.</p>
  
  <p>Each <code>row</code> in <code>rows</code> is built from a component with a unique key:</p>
  
  <pre><code>&lt;TableRowItem key={item.id} data={item} columns={columnNames}/&gt;
  </code></pre>
  
  <p>And the <code>TableRowItem</code> looks like this:</p>
  
  <pre><code>var TableRowItem = React.createClass({
    render: function() {
  
      var td = function() {
          return this.props.columns.map(function(c) {
            return &lt;td key={this.props.data[c]}&gt;{this.props.data[c]}&lt;/td&gt;;
          }, this);
        }.bind(this);
  
      return (
        &lt;tr&gt;{ td(this.props.item) }&lt;/tr&gt;
      )
    }
  });
  </code></pre>
  
  <p>What is causing the unique key prop error? </p>