title: How to make react.js play nice together with zurb reveal modal form
body: <p>I am trying to integrate zurb reveal with form into react component. So far next code properly displays modal form:</p>
  
  <pre><code>ModalForm = React.createClass({
    handleSubmit: function(attrs) {
      this.props.onSubmit(attrs);
      return false;
    },
  
    render: function(){
      return(
        &lt;div&gt;
          &lt;a href="#" data-reveal-id="formModal" className="button"&gt;Add new&lt;/a&gt;
          &lt;div id="formModal" className="reveal-modal" data-reveal&gt;
            &lt;h4&gt;Add something new&lt;/h4&gt;
            &lt;Form onSubmit={this.handleSubmit} /&gt;
            &lt;a className="close-reveal-modal"&gt;&amp;#215;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  </code></pre>
  
  <p>The <code>Form</code> component is pretty standard:</p>
  
  <pre><code>Form = React.createClass({
    handleSubmit: function() {
      var body = this.refs.body.getDOMNode().value.trim();
      if (!body) {
        return false;
      }
      this.props.onSubmit({body: body});
      this.refs.body.getDOMNode().value = '';
      return false;
    },
    render: function(){
      return(
        &lt;form onSubmit={this.handleSubmit}&gt;
          &lt;textarea name="body" placeholder="Say something..." ref="body" /&gt;
          &lt;input type="submit" value="Send" className="button" /&gt;
        &lt;/form&gt;
      );
    }
  }); 
  </code></pre>
  
  <p><strong>Problem:</strong> When I render form component within modal form component and enter something into form input then I see in console exception <code>Uncaught object</code>. This is a stack:</p>
  
  <pre><code>Uncaught object
    invariant
    ReactMount.findComponentRoot
    ReactMount.findReactNodeByID
    getNode
    ...
  </code></pre>
  
  <p>If I just render form component directly in the parent component then everything works. Could anybody help please?</p>