Skip to content

Instantly share code, notes, and snippets.

@samsch
Last active June 28, 2016 16:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save samsch/eee175eb0133b4686f8aa54afcbbdc62 to your computer and use it in GitHub Desktop.
Save samsch/eee175eb0133b4686f8aa54afcbbdc62 to your computer and use it in GitHub Desktop.
const React = require('react');
class NewComponent extends React.Component {
constructor(props) {
super(props);
this.onMouseOver = this.onMouseOver.bind(this);
}
onMouseOver() {
this.props.onMouseOver(this.props.id);
}
render() {
return (
<div onMouseOver={this.onMouseOver} onMouseLeave={this.props.onMouseLeave}>
{ props.isHovering ? 'I am being hovered over' : '' }
</div>
)
}
}
export default NewComponent
const items = [
{ id: 1, name: 'ABC' },
{ id: 2, name: 'EFG' },
{ id: 3, name: 'HIJ' },
]
class NewContainer extends Component {
contructor(props) {
super(props)
this.state = {
hoverID: null
}
}
handleMouseOver = (id) => {
this.setState({
hoverID: id
})
}
handleMouseLeave = () => {
this.setState({
hoverID: null
})
}
render() {
const { hoverID } = this.state
return (
{ items.map(item =>
<NewComponent
id={item.id}
onMouseOver={this.handleMouseOver}
onMouseLeave={this.handleMouseLeave}
isHover={hoverID === item.id} />
) }
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment