Onmouseover does not work with React.js

Question

The click event works fine, but the onmouseover event does not work.

ProfImage = React.createClass({ getInitialState: function() { return { showIcons: false }; }, onClick: function() { if(this.state.showIcons == true) { this.setState({ showIcons: false }); } else { this.setState({ showIcons: true }); } }, onHover: function() { this.setState({ showIcons: true }); }, render: function() { return ( <div> <span className="major"> <img src="/images/profile-pic.png" height="100" onClick={this.onClick} onmouseover={this.onHover} /> </span> { this.state.showIcons ? <SocialIcons /> : null } </div> ); } }); 

Answer 1

You need to iron out some letters.

 <img src="/images/profile-pic.png" height="100" onClick={this.onClick} onMouseOver={this.onHover} /> 

Answer 2

Both of the above answers are correct, but you also need to bind this method to the class context!

 <img src="/images/profile-pic.png" height="100" onClick={this.onClick.bind(this)} onMouseOver={this.onHover.bind(this)} />