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

i'm creating table uses data json, json "policies" change when click on different links in page, thing when click , state change, have generate table again new json,

uncaught error: invariant violation: processupdates(): unable find child 1 of element. means dom unexpectedly mutated (e.g., browser), due forgetting <tbody> when using tables, nesting tags <form>, <p>, or <a>, or using non-svg elements in <svg> parent. try inspecting child nodes of element react id .0.1.0.2.3.1.1.2.0.1.

the first time page loads table 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 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>         );     } }); 

i move render function creates 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 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 "firstname"                      return <td>{item[coldata.key]} {slf.renderseverity(item.severity) }</td>;                 } else {                     // coldata.key might "firstname"                     return <td> {item[coldata.key]} </td>;                 }             });             return <tbody><tr key={item.id}> {cells} </tr></tbody>;         });     }