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

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

i getting next error when react component re-rendered after click event:

uncaught error: invariant violation: processupdates(): unable find kid 2 of element. means dom unexpectedly mutated ...

this happens when table has different number of rows rendered version. example:

/** @jsx react.dom */ react = require('react'); var _ = require("underscore"); var testcomp = react.createclass({ getinitialstate: function () { homecoming { 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>); homecoming <div> <table> {rows} </table> </div> } }); module.exports = testcomp

if render different content, same number of rows, don't error, if update 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>); }

... works.

do need forcefulness react re-render entire component in case, instead of 'changed' elements?

you should read total error message (at to the lowest degree that's seeing):

unable find kid 2 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 parent.

every table needs <tbody> element. if doesn't exist, browser add together it. however, react doesn't work if dom manipulated outside.

related: removing row table results in typeerror

javascript reactjs