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

While clicking on the search-button, re-render happens and the results page is shown but the search button is not disposed.
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.

daniula · Accepted Answer · 2015-01-19 20:09:08Z

3

You made an error in your HTML markup.

Instead of:

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

Write simply:

<input type="text" />

answered Jan 19, 2015 at 20:09

daniula

7,0384 gold badges36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1033055 Over a year ago

Thanks a lot. Worked like a charm.

Collectives™ on Stack Overflow

Reactjs : Invariant Violation when using input element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related