Understanding unique keys for array children in React.js

I'm building a React component that accepts a JSON data source and creates a sortable table.

Each of the dynamic data rows has a unique key assigned to it but I'm still getting an error of:


Each child in an array should have a unique "key" prop.

Check the render method of TableComponent.

My TableComponent render method returns:

  
    
  
  
    { rows }
  

The TableHeader component is a single row and also has a unique key assigned to it.

Each row in rows is built from a component with a unique key:

And the TableRowItem looks like this:

var TableRowItem = React.createClass({
  render: function() {

    var td = function() {
        return this.props.columns.map(function(c) {
          return {this.props.data[c]};
        }, this);
      }.bind(this);

    return (
      { td(this.props.item) }
    )
  }
});

What is causing the unique key prop error?

You should add a key to each child as well as each element inside children.

This way React can handle the minimal DOM change.

In your code, each ` is trying to render some children inside them without a key.

Check this example.

Try removing the key={i} from the element inside the div's (and check the console).

In the sample, if we don't give a key to the element and we want to update only the object.city`, React needs to re-render the whole row vs just the element.

Here is the code:

const data = [
  { name: "Nuri", age: 28, city: "HO" },
  { name: "Talib", age: 82, city: "HN" },
  { name: "Jenny", age: 41, city: "IT" },
];

const ExampleComponent = React.createClass({
  render: function () {
    const infoData = this.props.info;
    return (
      
        {infoData.map((object, i) => {
          return (
            
              {[
                object.name,
                // remove the key
                
                  {" "}
                  {object.city}{" "}
                ,
                object.age,
              ]}
            
          );
        })}
      
    );
  },
});

React.render(, document.body);

The answer posted by @Chris at the bottom goes into much more detail than this answer.

React documentation on the importance and usage of keys: Keys

Stack Overflow Q#28329382, score: 953