Uncaught Error: Invariant Violation: findComponentRoot(..., ...$110): Unable to find element. This probably means the DOM was unexpectedly mutated

What I'm doing wrong with nested cycles in React? I have searched information in Google and I didn't find anything suitable. Can you help me find, what I understand wrong?

As can be seen from the figure, I have data in a variable. And it works fine. But when I'm adding a value not from this <tr>, error appears!

    var TableBalls80 = React.createClass({
        render:function(){
            var rows = this.props.rows;
            var columnId = 0, trKey = 0, divKey = 0, td1stKey = 0;
            var td2ndKey = 100;
            return(
                    <table className='table table-bordered bg-success'>
                                <thead>
                                <tr className='danger'>
                                    {rows[0].row.map(function (element){
                                        columnId++;
                                        return (
                                        <th colSpan="2" key={columnId}>{columnId}</th>);
                                    })}
                                </tr>
                                </thead>
                                <tbody>
                                    {rows.map(function (rowElement){
                                        return (<tr key={trKey++}>
                                        {rowElement.row.map(function(ball){
                                            console.log('trKey:'+trKey+' td1stKey'+td1stKey+' ball.value:'+ball.value+' td2ndKey:'+td2ndKey+' ball.count:'+ball.count);
                                            return(<div key={divKey++}>
                                                <td className='info' key={td1stKey++}>{ball.value}</td><td key={td2ndKey++}>{ball.count}</td>
                                            </div>);
                                        })}
                                        </tr>);
                                    })}
                                </tbody>
                            </table>);
        }
    });

Error (depends on which item is added from another<tr>):

Uncaught Error: Invariant Violation: findComponentRoot(..., .0.1.1.0.2.0.0.1.$0.$9.$109): >Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the >browser), usually due to forgetting a when using tables, n......`.

Answers


So the problem is you're creating a virtual DOM structure like this:

<tbody>
   <tr>
      <div>
         <td>...</td>
         <td>...</td>
      </div>
   </tr>
</tbody>

Because <div/> isn't a valid child of <tr> the browser actually creates DOM representing this:

<div> </div>
<table>
<tbody>
   <tr>
      <td>...</td>
      <td>...</td>
   </tr>
</tbody>
</table>

fiddle

When react goes to update, it's looking at that <tr> and wondering where the <div> went. Instead it finds a <td> so it throws an error.


I got the abovementioned error trying to do this for a test:

component = React.addons.TestUtils.renderIntoDocument(<MyTableRow />)
React.findDOMNode(component)

My fix was to wrap it before rendering:

component = React.addons.TestUtils.renderIntoDocument(<table><MyTableRow /></table>)
table = React.findDOMNode(component)
row = jQuery(table).find("tr")[0]

it can sometime also occur when React is loaded from two different locations (e.g. from require and in the HTML)


Please also check out this issue in react https://github.com/facebook/react/issues/3811 , this says " it's a current limitation that you can't return more than one component from a React render method. " so you should also check your render if its returning multiple elements


I had similar problem and the reason was that I was using <form> tag inside the React.js component and I rendered it to a page position that already had a <form> open. Forms can't be nested. So you can get this error even if the HTML inside the component seems to be valid.


This error is because somewhere there is HTML markup that is not valid.

In my case, I clumsily had React generating a form tag within a button tag and never realized until this error started to show up. Check your markup for nesting mistakes that are not allowed.


I had this same issue and it turned out to be two elements in the DOM with the same ID (inadvertently).


In my case the problem was with the type of the button. ReactDOM gets lost if you use a type="button" in a <button>.

I removed the type="button" and added a event.preventDefault() on my onClick handler and it worked for me.


Need Your Help

Hierarchical Databinding not working wpf

c# wpf data-binding telerik radgridview

I have this code which basically places a gridview below a cell of a gridview - a hierarchical type display.