user1072337 user1072337 - 25 days ago 17
React JSX Question

onmouseover not working with React.js

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

You need to capitalize some of the letters.

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