title: How to use React Component with Tether.js/drop.js
body: <p>I want to create and show a feedback modal next to different DOM elements depending upon the user actions on the page. I am able to position the modal but whenever I try to add info, it starts giving these errors - Invariant Violation: findComponentRoot".
  My question is, Is this the right way to use the library and how can I fix these errors.
  Here is plunker for the same
  <a href="http://plnkr.co/edit/alF7JyQAhBwcANyrQQiw" rel="noreferrer">http://plnkr.co/edit/alF7JyQAhBwcANyrQQiw</a></p>
  
  <pre><code>var Feedback = React.createClass({
    clickHandler: function(){
          console.log("form is submitted");
    },
    componentDidMount: function(){
      var el = this.getDOMNode();
      var drop = new Drop({
          target: document.querySelector('#test'),
          classes: 'drop-theme-arrows-bounce drop-hero',
          content: el,
          openOn: "click",
          tetherOptions: {
            attachment: 'bottom right',
            targetOffset: "0 10px"
          }
      });
    },
    render: function(){
      return (
        &lt;div className="drop-theme-hubspot-popovers"&gt;
          &lt;form&gt;
            &lt;div className="form-group"&gt;
              &lt;label&gt;Feedback&lt;/label&gt;
              &lt;input type="text" className="form-control"
                  placeholder="Enter email"
                  onChange={this.changeHandler}/&gt;
              &lt;a href="#" className="btn btn-default" onClick={this.clickHandler}&gt;Submit&lt;/a&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        );
    }  
  });
  
  var Demo = React.createClass({
    getInitialState: function(){
      return {feedback: null};
    },
    componentDidMount: function(){
      var FeedbackElement = React.createFactory(Feedback);
      var feedback = &lt;FeedbackElement/&gt;;
      //React.render(feedback, document.querySelector('#targetName'));
      this.setState({feedback:feedback});
  
    },
    render: function(){
      return (
        &lt;div className="container"&gt;
          &lt;div className="page-header"&gt;
              &lt;h1&gt;Hello&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div className="row"&gt;
          &lt;div className="col-sm-12"&gt;
              &lt;div className="col-lg-5"&gt;
                  &lt;a name="test" id="test" className="btn btn-default" onClick={this.clickHandler}&gt; Click&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          {this.state.feedback}
        &lt;/div&gt;
      );
    }
  });
  
  React.render(Demo(), document.getElementById('app'));
  </code></pre>