React Onmouseover Suggestion - css

Question

I'm learning build website using react and bootstrap css,
i have carousel, and separated navigation.
below example code of my carousel
class Home extends React.Component {
mousehover() {
... ???? .....
};
render() { return (
<div className="row">
<div id="carouselExampleIndicators" className="carousel slide col-9" data-ride="carousel">
<div className="carousel-inner" role="listbox">
<div className="carousel-item active">
<img className="d-block img-fluid" src="http://northdelawhere.happeningmag.com/wp-content/uploads/banner_sample300x300.jpg"
alt="First slide" />
</div>
<div className="carousel-item">
<img className="d-block img-fluid" src="http://www.raymiller.cc/thumbnail/exterior-beadboard-paneling-4-texture-plus-indoor-outdoor-siding-panel-beadboard-oak-sample-300-x-300.jpg"
alt="Second slide" />
</div>
<div className="carousel-item">
<img className="d-block img-fluid" src="..." alt="Third slide" />
</div>
</div>
<a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="sr-only">Previous</span>
</a>
<a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="sr-only">Next</span>
</a>
</div>
<div className="col-3">
<ul className="flex-column">
<li data-target="#carouselExampleIndicators" data-slide-to="0" onmouseover={this.mousehover}>one</li>
<li data-target="#carouselExampleIndicators" data-slide-to="1">two</li>
<li data-target="#carouselExampleIndicators" data-slide-to="2">three</li>
</ul>
</div>
</div>
)}
}
React.render(<Home />, document.getElementById('root'));
i'm trying create event for my list using onmousehover, but failed.
anyone can help me for give clue / example for onmousehover event which will slide to target carousel (data-slide-to) ?
thank you very much.

Answer 1

Have a look at the SyntheticEvent section of the React docs, it explains how to use events like onMouseEnter and onMouseLeave in React:
Your event handlers will be passed instances of SyntheticEvent, a
cross-browser wrapper around the browser's native event. It has the
same interface as the browser's native event, including
stopPropagation() and preventDefault(), except the events work
identically across all browsers.
That said, depending on your use case, you be better off implementing the hover effect using CSS's :hover pseudo-class.