Generate Table dynamically display error Uncaught Error: Invariant Violation - reactjs

Question

I'm creating a table that uses data from a json, the json "policies" change when I click on different links in the page, the thing is that when I click and the state change, I have to generate the table again with the new json, but I get an
Uncaught Error: Invariant Violation: processUpdates(): Unable to find child 1 of element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID .0.1.0.2.3.1.1.2.0.1.
The first time the page loads the table is correctly generated.
module.exports = React.createClass({
onPoliciesChange: function (policiesStore) {
this.setState(policiesStore);
},
getInitialState: function () {
return {
policies: []
};
},
componentDidMount: function () {
this.unsubscribeAlertsStore = AlertsStore.listen(this.onPoliciesChange);
},
componentWillUnmount: function () {
this.unsubscribeAlertsStore();
},
cols: [
{ key: 'name', label: 'Name'},
{ key: 'severity', label: 'Severity' },
{ key: 'width', label: 'Width' },
{ key: 'pulsate', label: 'Pulsate' }
],
generateHeaders: function () {
var cols = this.cols; // [{key, label}]
// generate our header (th) cell components
return cols.map(function (colData) {
return <th key={colData.key}> {colData.label} </th>;
});
},
generateRows: function () {
var slf = this;
var cols = this.cols, // [{key, label}]
data = this.data;
//per each item
return this.state.policies.map(function (item) {
// handle the column data within each row
var cells = cols.map(function (colData) {
return <td> {item[colData.key]} </td>;
});
return <tr key={item.id}> {cells} </tr>;
});
},
render: function () {
var headerComponents = this.generateHeaders(),
rowComponents = this.generateRows();
return (
<table className="table table-condensed table-striped">
<thead> {headerComponents} </thead>
<tbody> {rowComponents} </tbody>
</table>
);
}
});

Answer 1

I just move the from the render to the function that creates the rows:
generateRows: function () {
var severity = this.renderSeverity();
var slf = this;
var cols = this.cols, // [{key, label}]
data = this.data;
//per each item
return this.state.policies.map(function (item) {
// handle the column data within each row
var cells = cols.map(function (colData) {
if (colData.key === 'width') {
//return <td> <input type="checkbox" name="vehicle" value="Bike" onChange={slf.onChange.bind(null, id) }/></td>;
return <td> <input type="checkbox" onChange={slf.onChangeWidth.bind(null, item.id) }/></td>;
} else if (colData.key === 'pulsate') {
return <td> <input type="checkbox" onChange={slf.onChangePulsate.bind(null, item.id) }/></td>;
} if (colData.key === 'policyCheck') {
return <td> <input type="checkbox" onChange={slf.onChangePolicy.bind(null, item.id) }/></td>;
} else if (colData.key === 'severity') {
// colData.key might be "firstName"
return <td>{item[colData.key]} {slf.renderSeverity(item.severity) }</td>;
} else {
// colData.key might be "firstName"
return <td> {item[colData.key]} </td>;
}
});
return <tbody><tr key={item.id}> {cells} </tr></tbody>;
});
}