React js: Invariant Violation: processUpdates() when rendering a table with a different number of child rows

Question

I am getting the following error when my react component is re-rendered after a click event:

Uncaught Error: Invariant Violation: processUpdates(): Unable to find child 2 of element. This probably means the DOM was unexpectedly mutated ... 

This only happens when my table has a different number of rows than the previously rendered version. For example:

/** @jsx React.DOM */  React = require('react');  var _ = require("underscore");  var testComp = React.createClass({    getInitialState: function () {     return {        collapsed: false     };   },    handleCollapseClick: function(){     this.setState({collapsed: !this.state.collapsed});   },    render: function() {      var rows = [       <tr onClick={this.handleCollapseClick}><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>     ];      if(!this.state.collapsed){       rows.push(<tr><th>Row1 1</th><th>Row1 2</th><th>Row1 3</th></tr>);     }      rows.push(<tr><th>Footer 1</th><th>Footer 2</th><th>Footer 3</th></tr>);      return  <div>                 <table>                     {rows}                 </table>             </div>   }  });  module.exports = testComp 

If I render different content, but with the same number of rows, I don't get the error, so if I update the if statement to:

if(!this.state.collapsed){   rows.push(<tr><th>Row1 1</th><th>Row1 2</th><th>Row1 3</th></tr>); }else{   rows.push(<tr><th>Row2 1</th><th>Row2 2</th><th>Row2 3</th></tr>); } 

... everything works.

Do I need to force react to re-render the entire component in this case, instead of just the 'changed' elements?

Answer 1

You should read the full error message (at least that's what I am seeing):

Unable to find child 2 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 parent.

Every table needs a <tbody> element. If it doesn't exist, the browser will add it. However, React doesn't work if the DOM is manipulated from the outside.

Related: Removing row from table results in TypeError