React: onMouseOut does not behave as expected with nested elements

[dmitrig01]

given the following:

React.renderComponent(
    <div onMouseOut={ function() { console.log('here'); } } style={{width: '100px', height:'100px', backgroundColor:'#ccc'}}><div style={{width: '50px', height:'50px', backgroundColor:'#aaa'}}>a</div></div>,
    document.getElementById('example')
);

when you mouse over the smaller square within the bigger square, the onMouseOut of the bigger square gets called, despite the mouse still being contained within it.

[sophiebits]

This is no different from the same events outside of React. You probably want onMouseLeave.

[dmitrig01]

Ah, oops. thanks.