React.js key generation - hashmap

Question

I've a problem with the Reconciliation algorithm using a set of key (without duplicates). The snippet of code is similar to the examples:
`
var ResourceTable = React.createClass({
getInitialState: function() {
return {data: [{"rid": "Ciao ", "id": 10}, {"rid": "Mondo!", "id": 2}]};
},
componentDidMount: function() {
self = this;
self.setState({data: [{"rid":"first", "id": 3},{"rid":"second", "id": 1},{"rid":"third", "id": 2}]});
},
render: function() {
var commentNodes = this.state.data.map(function (resource, index) {
return (
<Resource key={resource.id} rid={resource.rid}/>
);
});
return(
<table>
{commentNodes}
</table>
);
}
});
`
The first time that the object is rendered everything works fine (for every value of the resource.id). The second time I've an unattended behavior: sometimes every element is correctly rendered and sometimes not, I made a lot of attempts, but I cannot find an explanation.
The case that cause the error is:
First rendering keys: [10,2]
Second rendering keys: [3,1,2]
The result is that only two element are rendered during the second rendering.

Answer 1

React is very sensitive if you are rendering HTML which is mutating in browser. This is the case with <table>, which can be created like this:
<table>
<tr><td>Cell</td></tr>
</table>
But in fact browsers are changing it to:
<table>
<tbody>
<tr><td>Cell</td></tr>
</tbody>
</table>
After this operation DOM and React Virtual DOM differs and triggers errors like yours. To fix it just change:
return (
<table>
{commentNodes}
</table>
);
into:
return (
<table>
<tbody>{commentNodes}</tbody>
</table>
);