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

Question

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.