Uncaught Error: Invariant Violation: findComponentRoot: Unable to find element.

I have this modal, in this component:

    var Modal = React.createClass({
        componentDidMount: function () {
            var modal = $('[data-remodal-id=modal]').remodal();
            $("button[type=submit]").on('click', function(e){
                e.preventDefault();
                modal.open();
            })
        },
        _handleVerify: function (e) {
            e.preventDefault();
            console.log('verifying....');
            //console.log(this.refs.vericationCode);
        },
        render: function () {
            return(
                <div className="remodal" data-remodal-id="modal">
                  <button data-remodal-action="close" className="remodal-close"></button>
                  <h1>Per attivare autenticazione OTP segui le istruzioni</h1>
                  <p>
                    Inserisci il tuo secret {this.props.secret} in Google authenticator, e inserisci il codice a 6 cifre prodotto qui
                  </p>
                  <br />
                  <form>
                    <div className="form-group">
                        <input type="text" className="form-control" id="vericationCode" placeholder="Enter Verification Code" ref="vericationCode" />
                    </div>
                    <button className="remodal-confirm" onClick={this._handleVerify}>Verica</button>
                  </form>
                </div>
                );
        }
    });

But when I click on the button, and trigger this._handleVerify, it gives me:

Uncaught Error: Invariant Violation: findComponentRoot(..., .0.1.1.1.4.1): 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, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent.

The component .0.1.1.1.4.1 it is the button. And this not happen if I remove the onClick event trigger on the element. I can’t figure out what is the problem!

[jimfb]

@ciaoben The point of using React is that you should not be modifying the DOM, so the ‘correct’ solution is to not use remodal. Instead, you should define your UI declaratively such that no DOM manipulations are needed.

If you’re trying to popup a modal, I would recommend watching Ryan Florence’s talk (http://conf.reactjs.com/schedule.html#hype) and playing with the portals demo located in demos/03-portals of https://github.com/ryanflorence/reactconf-2015-HYPE

[blainekasten]

Do you know what the $.remodal() function is doing? Essentially what seems to be happening here is that your componentDidMount code is modifying the DOM. React jealously wants full control of manipulating the DOM. So a more proper rails way of doing these things would be using state and displaying a modal depending on state:

var Modal = React.createClass({
  getInitialState: function() {
    return { isModaled: false }
  },

  componentDidMount: function() {
    // this is not even ideal really..
    $("button[type=submit]").on('click', function(e){
      e.preventDefault();
      this.setState({isModaled: true});
    }.bind(this))
  },

  render: function() {
    if (this.state.isModaled) {
      return ...ModalDOM...;
    }

    // maybe return an empty div when not showing a modal?
    return <div></div>;
  }
});