title: Reactjs : Invariant Violation when using input element
body: <p>I am a bit new to React and was trying out a simple experiment.</p>
  
  <p>I wanted to have a <code>text-box</code> and a <code>search-button</code> in my initial render, and then when I click on the <code>search-button</code>, I wanted a completely different markup (<code>close-button</code> + <code>div/h1</code>)</p>
  
  <p>So I store the value in a state variable and in render method I check that state and decide upon the markup.</p>
  
  <p>Here's the JSFiddle for the same <a href="http://jsfiddle.net/rso3uk9f/" rel="nofollow noreferrer">http://jsfiddle.net/rso3uk9f/</a></p>
  
  <p><strong>While doing this, I was facing 2 problems</strong></p>
  
  <ol>
  <li><p>While clicking on the search-button, re-render happens and the results page is shown but the search button is not disposed.</p></li>
  <li><p>When I click on close button, I get errors like</p></li>
  </ol>
  
  <blockquote>
    <p>Danger: Discarding unexpected node: " ". </p>
    
    <p>ReactMount: Two valid but unequal nodes with the same <code>data-reactid</code>:
    .0.1</p>
  </blockquote>
  
  <p>Can somebody give some clean workaround ?</p>
  
  <p>Some of the work-arounds, I tried</p>
  
  <ul>
  <li><p>If you substitute input element with text-area or div then everything
  works fine.</p></li>
  <li><p>Also If I add an empty div after the search-button, then the empty
  div is renderend on the results page and search-button is not displayed. But the JS errors still comes up.</p></li>
  </ul>