Material UI Base Fiddle

HTML

<script src="https://fb.me/react-with-addons-15.2.1.js"></script>
<script src="https://fb.me/react-dom-15.2.1.js"></script>
<script src="https://rawgit.com/nathanmarks/3f5196f5973e3ff7807f2bab4e603a37/raw/f409f3bf5902c211b358a3ebe7b6cd366da551e8/mui-umd.js"></script>
<div id="container"></div>

Babel + JSX

const { Popover, MuiThemeProvider, getMuiTheme, Menu } = MaterialUI;

 class SliderExampleControlled extends React.Component {

  state = {
		open: false
  }
  
   handleTouchTap = (event) => {
// This prevents ghost click.
    event.preventDefault();

    this.setState({
      open: true,
      anchorEl: event.currentTarget,
     });
    };
    
    clickHandle = () => {
    	this.handleRequestClose();
    };
    
    handleRequestClose = () => {
      this.setState({
        open: false,
      });
    };

  render() {
    return (
      <div>
        <div id="PaymentPanel">
          <div className="PaymentTitle">Spent Last 14 Days<button className="PaymentToggle" onClick={this.handleTouchTap}>▼</button></div>
          <Popover
            open={this.state.open}
            anchorEl={this.state.anchorEl}
            anchorOrigin={{horizontal: 'left', vertical: 'top'}}
            targetOrigin={{horizontal: 'right', vertical: 'top'}}
            onRequestClose={this.handleRequestClose}
            >
            <Menu>
              <p className="menuItem" onClick={this.clickHandle}>{!this.state.priceBar? "Spent Last 14 Days" : "Spent Last 14 Days"}</p>
              <p className="menuItem"  onClick={this.clickHandle}>{this.state.priceBar? "Spent Last 30 Days" : "Spent Last 30 Days"}</p>
            </Menu>
          </Popover>
       </div>
     </div>
    );
  }
}

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <SliderExampleControlled />
  </MuiThemeProvider>
);

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