title: How to make a React.js inline portal for a jQuery Datepicker
body: <p>I've watched,</p>
  
  <p><a href="http://youtu.be/z5e7kWSHWTg?t=15m17s" rel="nofollow noreferrer">http://youtu.be/z5e7kWSHWTg?t=15m17s</a></p>
  
  <p>and read,</p>
  
  <p><a href="https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md" rel="nofollow noreferrer">https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md</a></p>
  
  <p><a href="https://github.com/ryanflorence/react-training/tree/gh-pages/code/Dialog" rel="nofollow noreferrer">https://github.com/ryanflorence/react-training/tree/gh-pages/code/Dialog</a></p>
  
  <p><a href="http://jsbin.com/dutuqimawo/edit?js,output" rel="nofollow noreferrer">http://jsbin.com/dutuqimawo/edit?js,output</a></p>
  
  <p><a href="https://stackoverflow.com/questions/28802179/how-to-create-a-react-modalwhich-is-append-to-body-with-transitions">How to create a React Modal(which is append to `&lt;body&gt;`) with transitions?</a></p>
  
  <p>and I get the concept of the Portal, that you're tricking React into ceasing its rendering for one piece of the DOM, then continuing the rendering afterward, so you can tinker with that piece of the DOM without confusing React by making its virtual DOM get out of sync.</p>
  
  <p>My problem is that the examples all address a Dialog that is rendered <em>at the end</em> of the page, but appears inline when you're reviewing your code. It's a cool trick for using a jQuery modal, but I need a jQuery datepicker whose div actually remains where I put it. (As an aside, I'm also curious about GetDOMNode's presence in the examples when it's <a href="https://facebook.github.io/react/docs/component-api.html" rel="nofollow noreferrer">deprecated</a>? I suppose you use FindDOMNode, although you call it slightly differently, plus the documentation says "In most cases, use of this escape hatch is discouraged because it pierces the component abstraction", which makes me a little gunshy to use it.)</p>
  
  <p>To isolate the jQuery datepicker from React, I originally created one React component to handle everything above the datepicker, and another to handle everything below the datepicker, and used event listeners in each component to listen for updates. However, I prefer the design of a single parent component that passes everything down to its children; it seems like a cleaner design.</p>
  
  <p>I redesigned it with a single parent and it <em>seems</em> to work, but I have no idea if my portal is really isolated from React's virtual DOM or not; it's my first crack at a portal so I'm really muddling through. (I am using React-Bootstrap for my navbar and it works great; I just couldn't find an equivalent to jQuery's datepicker and I like how it looks and operates, which is why I'm sticking with it.)</p>
  
  <p>Here's my top-level component (I removed the props/componentDidMount/etc for clarity). The <code>&lt;CalendarControl /&gt;</code> is going to be the portal:</p>
  
  <pre><code>var ReactApp = React.createClass({
  
      render: function() {
          return (
              &lt;div&gt;
                  &lt;BootstrapNavbar division={this.state.division} dps={this.state.dps} sections={this.state.sections} /&gt;
  
                  &lt;div className="container"&gt;
                      &lt;br /&gt;
                      &lt;br /&gt;
                      &lt;br /&gt;
  
                      &lt;div className="row"&gt;
                          &lt;div className="col-md-4" id="calendarPortal"&gt;
                              &lt;CalendarControl /&gt;
                          &lt;/div&gt;
                          &lt;div className="col-md-8"&gt;
                              &lt;h3&gt;{this.state.dp}&lt;/h3&gt;
                              &lt;h4&gt;{this.state.dpStartDate} - {this.state.dpEndDate}&lt;/h4&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;TimebookTableRecords timebookRecords={this.state.timebookRecs} /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <p>Here's the code for my <code>CalendarControl</code> portal. When the <code>CalendarControl</code> mounts, I'm creating a new div <code>calendarControl</code> as a child of <code>calendarPortal</code>. I then use jQuery to create the datepicker on the <code>calendarControl</code> div.</p>
  
  <pre><code>var CalendarControl = React.createClass({
      render: function () {
          return null;
      },
      componentDidMount() {
          var portalLocation = document.getElementById("calendarPortal");
          var newElement = document.createElement('div');
          newElement.id = "calendarControl";
          portalLocation.appendChild(newElement);
      },
  
      componentWillUnmount() {
          var portalLocation = document.getElementById("calendarPortal");
          document.body.removeChild(portalLocation);
      },
  });
  </code></pre>
  
  <p>Here's the jQuery code that creates a datepicker on the <code>calendarControl</code> div:</p>
  
  <pre><code>$("#calendarControl").datepicker({
     numberOfMonths: monthDiff,
     defaultDate: dpStartDate,
     showButtonPanel: false, 
     beforeShowDay: formatCalendarDays, //formatter function
     onSelect: dateClicked //handles click on calendar date
  </code></pre>
  
  <p>The final product <em>seems</em> to work fine, and doesn't generate any "the DOM was unexpectedly mutated" errors like when you manipulate part of the DOM that's under React's purview. I can update the state of the parent and see the changes propagate down nicely, and use jQuery to update the calendar.</p>
  
  <p><a href="https://i.stack.imgur.com/eOZ6G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eOZ6G.png" alt="enter image description here"></a></p>
  
  <p>However, I just don't know if this is the correct approach? That is to say, have I achieved a true portal here? I used the Google Chrome React Developer Tools add-in to inspect the component hierarchy, and it does look like from React's perspective there's a null in the <code>CalendarControl</code> div:</p>
  
  <p><a href="https://i.stack.imgur.com/ZMMSs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZMMSs.png" alt="enter image description here"></a></p>
  
  <p>Thanks for bearing with me in this lengthy post. I have to say that so far I'm really loving the React approach to web development; it's so radically different that it took a number of readings and tinkering just to understand its concepts, but now it seems so much more elegant than the ways I've done it in the past.</p>