React Programming Pitfalls

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>
    );
}