React, Swap between two children on hover

Hover.js

// swap children on hover
/*
<Hover>
  <span>this</span>
  <span>that</span>
</Hover>
*/
import React, { Component } from 'react';
export default class Hover extends Component {
  constructor () {
    super();
    this.state = { hover: false };
  }
  onMouseEnterHandler () {
    this.setState({ hover: true });
  }
  onMouseLeaveHandler () {
    this.setState({ hover: false });
  }
  render () {
    return (
      <span onMouseEnter={() => this.onMouseEnterHandler()} onMouseLeave={() => this.onMouseLeaveHandler()}>
        {!this.state.hover && this.props.children[0]}
        {this.state.hover && this.props.children[1]}
      </span>
    );
  }
}