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

by

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.

More Related Contents:

  1. What is component in reactjs?
  2. Call child method from parent
  3. Window is not defined in Next.js React app
  4. React Context vs React Redux, when should I use each one? [closed]
  5. Correct way to push into state array
  6. React JS – Uncaught TypeError: this.props.data.map is not a function
  7. Pass react component as props
  8. react-router getting this.props.location in child components
  9. How to register event with useEffect hooks?
  10. Is there a generic way to set state in React Hooks? How to manage multiple states?
  11. React Function Components with hooks vs Class Components
  12. Can I execute a function after setState is finished updating?
  13. where is create-react-app webpack config and files?
  14. Importing multiple files in react
  15. How to print React component on click of a button?
  16. How to render Streamable image on React coming from FastAPI server?
  17. Determine which dependency array variable caused useEffect hook to fire
  18. unable to deploy next js to azure
  19. Updating state to the same state directly in the component body
  20. how to set up an inline svg with webpack
  21. Does strict mode work differently with React 18?
  22. stop dragging after a limit has reached
  23. Equivalent to componentDidUpdate using React hooks
  24. How to Call a Function inside a Render in React/Jsx
  25. reactjs event listener beforeunload added but not removed
  26. Browser Detection in ReactJS
  27. React – Dynamically Import Components
  28. passing data from child to parent component – react – via callback function
  29. FastAPI is not returning cookies to React frontend
  30. React Functional component: calling as function vs. as component

Leave a Comment