Basic React Babel ES6 Fiddle

HTML

<script src="https://fb.me/react-dom-0.14.3.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.hide {
  display: none
}

.show {
  display: block !important;
}

div:focus {
		outline: none;
	}

Babel + JSX

class Hello extends React.Component {
  constructor(){
    super()
    this.state = {
      openDropdown: false
    }
  }
  
  toggleDropdown = () => {
  	this.setState({
    	openDropdown: !this.state.openDropdown
    })
  }
  
  render() {
    return (
      <div>
        <div tabIndex="0" onFocus={this.toggleDropdown} onBlur={this.toggleDropdown}>
          MyList
        <ul className={this.state.openDropdown ? 'show' : 'hide'}>
          <li>abc</li>
          <li>123</li>
          <li onClick={()=> this.setState({openDropdown:false})}>xyz</li> {/* not working */}
        </ul>
      </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Hello initialName="World"/>,
  document.getElementById('container')
);