title: How to make simple form more React-like? (DOM node goes missing)
body: <p>I am converting a little HTML/JS form I did years ago, as a React.js learning exercise, and I have run into a stumbling block which I'd like to understand the reason for. </p>
  
  <p>Basically, as it originally was, I had a select, where you could choose which form you wanted to display. The onchange handler for the select displayed the chosen form and hid the others. So my first step in doing a React makeover of this, which has worked fine, is to make the forms into React components. I am left with this as my HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="main"&gt;
          &lt;select id="calculations" onChange="handleSelect();"&gt;
              &lt;option value="" selected="selected"&gt;SELECT CALCULATION FORM&lt;/option&gt;
              &lt;option value="1"&gt;Enter pace and distance to get a total time&lt;/option&gt;
              &lt;option value="2"&gt;Enter distance and target time to get the required pace&lt;/option&gt;
              &lt;option value="3"&gt;Enter pace and time to get the distance run&lt;/option&gt;
              &lt;option value="4"&gt;Convert mph to mins/mile&lt;/option&gt;
              &lt;option value="5"&gt;Convert mins/mile to mph&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;div id="calcForm"/&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>This is the JS:</p>
  
  <pre><code>window.handleSelect=function(){
      var selected=$("#calculations").val();
      if(selected!=""){
          React.render(React.createElement(CalcForm, {selected: selected, distances: distances}),document.getElementById('calcForm'));
      } else {
          $("#calcForm").html("");//clear it
      }
  };
  </code></pre>
  
  <p>I have been frustrated, though, in my attempts to finish the job off my making the main select into a React component. I tried creating a SelectCalc component and using it like this:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="main"&gt;
  
          &lt;div id="selectCalc"/&gt;  
          &lt;div id="calcForm"/&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>In my app.js I had this:</p>
  
  <pre><code>React.render(React.createElement(SelectCalc,null), document.getElementById('selectCalc'));
  </code></pre>
  
  <p>I made the handleSelect a function of the SelectCalc class, so that when an option was selected, it called this:</p>
  
  <pre><code>React.render(React.createElement(CalcForm, {selected: selected, distances: distances}),document.getElementById('calcForm'));
  </code></pre>
  
  <p>Here is where the problem came in, though. When done this way, when I select an option I get the error:</p>
  
  <p>Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.</p>
  
  <p>The target container in question is the 'calcForm' div, as identified in document.getElementById('calcForm'). For reasons which baffle me, this is null (I checked in the console). And yet it is clearly there in the HTML, and it was successfully targeted by my more primitive select change handler, prior to the React makeover.</p>
  
  <p>So what is the issue? What am I misunderstanding here? Given that this is such a very simple example of React.js at work, how should I be doing it?</p>
  
  <p>Fiddle of non-working version at <a href="https://jsfiddle.net/JohnMoore/7rp3n1oy/2/" rel="nofollow">https://jsfiddle.net/JohnMoore/7rp3n1oy/2/</a>, I hope - first ever use of Fiddle (!), so I hope it shows the issue. Try running it and selecting one of the options and see the error in the console. There is also a preceding error, I notice, on JSFiddle: "SyntaxError: expected expression, got '&lt;'". I have to say this doesn't make much sense to me, as I would have thought what was expected in the return from the render was, precisely, some HTML beginning with &lt;. I don't know whether this is related or whether it's an artefact of the Fiddle environment.</p>