title: ReactJs: Wrap Semantic UI Modal using Portal "pattern"
body: <p>I'm trying to wrap Semantic UI Modal component using portal approach described <a href="https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md#portals" rel="nofollow">here</a> </p>
  
  <p>Here is my take at it <a href="http://jsfiddle.net/mike_123/2wvfjpy9/" rel="nofollow">http://jsfiddle.net/mike_123/2wvfjpy9/</a> 
  I'm running into issue though, when obtaining a DOM reference and Rendering new markup into it there seem to be old reference still maintained. </p>
  
  <pre><code>render: function() {
      return &lt;div className="ui modal"/&gt;; &lt;-- the idea at first was to only return &lt;div/&gt;
  },
  </code></pre>
  
  <p>...</p>
  
  <pre><code>        React.render(&lt;div &gt; &lt;----------- originally this element had className="ui modal", but this.node doesn't seem to overtake the original node reference
                      &lt;i className="close icon"&gt;&lt;/i&gt;
                      &lt;div className="header"&gt;test&lt;/div&gt;
                      &lt;div className="content"&gt;
                          {props.children}
                      &lt;/div&gt;
                  &lt;/div&gt;, &lt;----------- 
                  this.node);
  </code></pre>
  
  <p>Any pointers how fix this test case <a href="http://jsfiddle.net/mike_123/2wvfjpy9/" rel="nofollow">http://jsfiddle.net/mike_123/2wvfjpy9/</a> </p>