1. When returning JSX from "render", the following ( cannot be on next line. Otherwise the following error will be thrown in browser debug console.
Invariant Violation: SearchBox.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
$(function(){
var SearchBox = React.createClass({
getInitialState: function(){
return {currInput: ''}
},
handleKey: function(e)
{
this.setState({currInput: this.state.currInput + e.key });
},
render: function(){
return ( <div>
<input type="text" onKeyPress={this.handleKey} />
<div>{this.state.currInput}</div>
</div>
);
}
});
React.render(<SearchBox />, $('.myContent')[0])
})
2. React event name is case sensitive, WebStorm intellisense's event name is all lower cases.
render: function(){ return ( <div> <input type="text" onKeyPress={this.handleKey} /> <div>{this.state.currInput}</div> </div> ); }
