How to use a jQuery modal with React view switching? - jquery-ui

Question

I'm a bit of a novice when it comes to React, so hopefully someone can help.
I've been able to create a generic view switching component using React.
var ViewSwitcherContainer = React.createClass({
getInitialState: function() {
return {
activeViewName : this.props.views[0].Name
};
},
selectView: function(name) {
this.state.activeViewName = name;
this.forceUpdate();
},
render: function () {
return <div>
<ViewSwitcher views={this.props.views} onViewSelection={this.selectView}/>
<ViewSwitcherContent views={this.props.views} activeViewName={this.state.activeViewName}/>
</div>;
}
});
Here is a JSFiddle demonstration...
http://jsfiddle.net/paheal/j8Ubc/
However when I try to load that switching component in a modal component I sometimes get an'Uncaught Error: Invariant Violation: findComponentRoot(..., .r[3iziq].[1].[0].[1]): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g. by the browser).' error from react.
var ModalView = React.createClass({
getInitialState: function () {
this.viewDefinitions = [
{DisplayName:'View A', Name:'viewA', View:ViewA},
{DisplayName:'View B', Name:'viewB', View:ViewB}
];
return {};
},
componentDidMount: function () {
$("#" + this.props.modalId ).dialog({
autoOpen: false,
height: 400,
width: 400,
modal: true,
draggable: false,
resizable: false
});
},
render: function () {
return <div id={this.props.modalId} title={this.props.modalId}>
<ViewSwitcherContainer views={this.viewDefinitions}/>
</div>;
}
});
Here is a JSFiddle demonstration...
http://jsfiddle.net/paheal/j8Ubc/7/
What am I missing? Is the problem in my modal component or in the view switching components?

Answer 1

I actually worked out what was wrong. It seems that the dialog functionality in jQueryUI adds to the DOM, by dynamically creating div for the dialog and its title bar.
Depending on the timing of things, that can cause issues when React is doing its reconciliation.
To resolve I implemented a Reactified version of a modal dialog.