React Bootstrap Modal using custom mixin of common modal functions

ReactBoostrapModalMixin.jsx

ModalMixin = {
  getInitialState: function() {
    return { showModal: false };
  },
  close: function() {
    this.setState({ showModal: false });
  },
  open: function() {
    this.setState({ showModal: true });
  },
};

var ModalExample = React.createClass({
  mixins: [ModalMixin],
  render: function() {
    return(
      <span>
        <ReactBootstrap.Button bsStyle="primary" onClick={this.open}>
          Open modal
        </ReactBootstrap.Button>
        
        <ReactBootstrap.Modal show={this.state.showModal} onHide={this.close}>
          <ReactBootstrap.Modal.Header closeButton>
            <ReactBootstrap.Modal.Title>Modal Example</Modal.Title>
          </ReactBootstrap.Modal.Header>
          <ReactBootstrap.Modal.Body>
            <h1>Hello World</h1>
          </ReactBootstrap.Modal.Body>
        </ReactBootstrap.Modal>
      </span>  
    );
});