Event on React

<!DOCTYPE html>
<html>

  <head>
    <script data-require="react@*" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
    <script data-require="react@*" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react-dom.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="example"></div>
    <script src="script.js"></script>
  </body>

</html>

// Code goes here
class App extends React.Component {
  constructor(props){
    super(props);
    this.onClickEvent = this.onClickEvent.bind(this);
    this.onHoverEvent = this.onHoverEvent.bind(this);
    this.onInitialState = this.onInitialState.bind(this);
    this.state = {
      buttonState: ""
    };
  }
  
  componentDidMount() {
    this.setState({
      buttonState: "Initial State"
    });
  }
  
  onClickEvent() {
    this.setState({
      buttonState: "On Click"
    });
  }
  
  onHoverEvent() {
    this.setState({
      buttonState: "On Hover"
    });
  }
  
  onInitialState() {
    this.setState({
      buttonState: "Initial State"
    });
  }
  
  render() {
    return (<button onClick={this.onClickEvent} onMouseEnter={this.onHoverEvent} onMouseLeave={this.onInitialState}>{this.state.buttonState}</button>);
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('example')
);

/* Styles go here */