n1k0/jsbin.dixujuve.html

## jsbin.dixujuve.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="A sample react dropdown menu component" />
  <script src="//fb.me/react-with-addons-0.10.0.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="menu"></div>
</body>
</html>

## jsbin.dixujuve.jsx
/** @jsx React.DOM */

var MenuItem = React.createClass({
  handleClick: function(event) {
    this.props.action(this.props.option);
  },

  render: function() {
    return (
      <button onClick={this.handleClick}>
        {this.props.option.name}
      </button>
    );
  }
});

var Menu = React.createClass({
  getInitialState: function() {
    return {
      opened: false,
      options: this.props.options || [],
      selected: this.props.selected
    };
  },

  open: function(event) {
    this.setState({open: true});
  },

  select: function(option) {
    this.setState({open: false, selected: option});
  },

  render: function() {
    if (!this.state.open) {
      return (
        <MenuItem option={this.state.selected} action={this.open} />
      );
    }
    return (
      <ul>
        {this.state.options.map(function(option, key) {
          return (
            <li key={key}>
              <MenuItem option={option} action={this.select} />
            </li>
          );
        }.bind(this))}
      </ul>
    );
  }
});

var options = [{name: "a", value: 1}, {name: "b", value: 2}];

React.renderComponent(
  <Menu options={options} selected={options[1]} select={console.log} />,
  document.querySelector('#menu')
);
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="A sample react dropdown menu component" />
	<script src="//fb.me/react-with-addons-0.10.0.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div id="menu"></div>
	</body>
	</html>
	/** @jsx React.DOM */

	var MenuItem = React.createClass({
	handleClick: function(event) {
	this.props.action(this.props.option);
	},

	render: function() {
	return (
	<button onClick={this.handleClick}>
	{this.props.option.name}
	</button>
	);
	}
	});

	var Menu = React.createClass({
	getInitialState: function() {
	return {
	opened: false,
	options: this.props.options \|\| [],
	selected: this.props.selected
	};
	},

	open: function(event) {
	this.setState({open: true});
	},

	select: function(option) {
	this.setState({open: false, selected: option});
	},

	render: function() {
	if (!this.state.open) {
	return (
	<MenuItem option={this.state.selected} action={this.open} />
	);
	}
	return (
	<ul>
	{this.state.options.map(function(option, key) {
	return (
	<li key={key}>
	<MenuItem option={option} action={this.select} />
	</li>
	);
	}.bind(this))}
	</ul>
	);
	}
	});

	var options = [{name: "a", value: 1}, {name: "b", value: 2}];

	React.renderComponent(
	<Menu options={options} selected={options[1]} select={console.log} />,
	document.querySelector('#menu')
	);