Reactjs : Invariant Violation when using input element

Question

I am a bit new to React and was trying out a simple experiment.

I wanted to have a text-box and a search-button in my initial render, and then when I click on the search-button, I wanted a completely different markup (close-button + div/h1)

So I store the value in a state variable and in render method I check that state and decide upon the markup.

Here's the JSFiddle for the same http://jsfiddle.net/rso3uk9f/

While doing this, I was facing 2 problems

1. While clicking on the search-button, re-render happens and the results page is shown but the search button is not disposed.

2. When I click on close button, I get errors like

Danger: Discarding unexpected node: " ".

ReactMount: Two valid but unequal nodes with the same data-reactid: .0.1

Can somebody give some clean workaround ?

Some of the work-arounds, I tried

• If you substitute input element with text-area or div then everything works fine.

• 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.

Answer 1

You made an error in your HTML markup.

Instead of:

<input type="text"> </input>

Write simply:

<input type="text" />