findComponentRoot error with Foundation's Modal plugin

[dhruvbhatia]

(x-post from the Mailing List)

Hi,

I'm working on a project that uses Foundation's modal system, but I've run into a bit of a pain-point.

It seems that whenever a modal launches/closes, Foundation manipulates the DOM in it's own special way, and as a result React's Virtual DOM loses track of what's going on. After this all of React's event handlers break, since the DOM has changed.

I've created a plunk to illustrate this. I basically want the button within the modal to utilise React's onClick event handler and call the clickButton() function, but no dice:
See http://plnkr.co/edit/Z6y5dI?p=preview

Upon clicking the button, I get the following error in the console:

Error: Invariant Violation: findComponentRoot(..., .0.1.3): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables or nesting <p> or <a> tags. Try inspecting the child nodes of the element with React ID ``.

I've tried a combination of things including using forceUpdate() in conjunction with Foundation's own modal event system, but I just can't get things to work. This SO question is related.

Assistance appreciated!

Cheers,

Dhruv Bhatia

[syranide]

You're not allowed to modify DOM nodes managed by React.

What you need to do is take the DOM nodes that the modal system interacts with and create them yourself instead (so that they're not managed by React). You can do this either with dangerouslySetInnerHTML or innerHTML. The content of the modal (that the modal system does not interact with) can make use of React again by simply calling React.renderComponent.

So rather than all being managed by React, you end up "React > Modal system > React".

Makes sense?

[sophiebits]

(In the future, the mailing list is a better place for questions like this.)

[dyatlov]

@syranide @dhruvbhatia
Created a sample based on @syranide' suggestion: https://gist.github.com/dyatlov/aa357617cf0afeb5b19f
Would love to hear some comments as im pretty new to react too