React Bootstrap with Modal and Popover

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap-table/2.5.5/react-bootstrap-table.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap-table/2.5.5/react-bootstrap-table-all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.5/react-bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container">Loading...</div>

JavaScript 1.7

class InputMenu extends React.Component {
    constructor(props) {
        super(props);
    }
    
    renderPopover() {
      return (
        <ReactBootstrap.Popover id="popover-positioned-bottom">
         	<input ref="min" type="number" className="filter" placeholder="min" />
          <input ref="max" type="number" className="filter" placeholder="max" />
        </ReactBootstrap.Popover>
      );
    }
    
    render() {
      const overlayProps = {
        overlay: this.renderPopover(),
        placement: 'bottom',
        trigger: 'click',
        container: document.getElementById('modal')
      };

      return (
        <ReactBootstrap.OverlayTrigger {...overlayProps}>
        	<ReactBootstrap.Button>[open filter menu]</ReactBootstrap.Button>
        </ReactBootstrap.OverlayTrigger>
      );
    }
};


class CustomModal extends React.Component {
		constructor(props) {
    	super(props);
      this.state = { showModal: false }
      this.open = this.open.bind(this);
      this.close = this.close.bind(this);
    }
    close() { this.setState({ showModal: false }); }
    open() { this.setState({ showModal: true }); }
    render() {
        return (
          <div id="thediv">
            <button onClick={this.open}>Open Modal</button>
            
            <ReactBootstrap.Modal show={this.state.showModal} onHide={this.close} id="modal">
              <ReactBootstrap.Modal.Header></ReactBootstrap.Modal.Header>
                <ReactBootstrap.Modal.Body>
                  <InputMenu id="inputMenu" />
                </ReactBootstrap.Modal.Body>
              <ReactBootstrap.Modal.Footer></ReactBootstrap.Modal.Footer>
            </ReactBootstrap.Modal>
            
          </div>
        );
    }
};


ReactDOM.render(
  <CustomModal />,
  document.getElementById('container')
);