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:
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);
}.bind(this);
return (
)
}
});
What is causing the unique key prop error?
In this case, if we do not give a key to the b> element and want to re-render the whole row vs. . In our code, each child must be given the key as well as the element inside the child.\n\nConst ExampleComponent = React.createClass() const infoDataData = This.props.infoinfoInfoInfo InfoInfo = this.t.d.D.INFOINFOInfoINFO; return((object, i) ‘div classClassClassName =in’ return (i.m. classclassclassName,in\’theirheir(addressdressed, \”posfo.name,rtabletable),- object.a/b>, object/d> ; .\n\nReact.render(ExampleComponent info=data />, document.body); .\n\nThis answer is much more detailed than the answer posted by @Chris at the bottom: React documentation on the importance and use of keys: Keys.
