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

Question

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......`.

Answer 1

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.

Answer 2

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]

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

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.

Answer 7

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

Answer 8

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.