krupenik/gist:da0bd5a47f21930f77e6

## gistfile1.html
<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/react/react-with-addons.js"></script>
    <script src="bower_components/react/JSXTransformer.js"></script>
    <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap-theme.css">

    <style type="text/css">
    .dropdown-menu { display: block; }
    </style>
  </head>
  <body>
    <div id="example" class="container-fluid"></div>
    <script type="text/jsx">
      var DropdownButton = React.createClass({
        getDefaultProps: function() {
          return {
            active: false,
            title: "Button"
          };
        },

        handleClick: function() {
          this.props.onClick();
        },

        render: function() {
          classes = React.addons.classSet({
            "btn btn-default btn-lg": true,
            "active": this.props.active
          });

          return (
            <button className={classes} onClick={this.handleClick}>
              {this.props.title}
              <span className="caret"></span>
            </button>
          );
        }
      });

      var DropdownItem = React.createClass({
        handleClick: function() {
          this.props.onClick(this.props.value);
        },

        render: function() {
          var classes = React.addons.classSet({
            "active": this.props.selected,
          });

          return (
            <li className={classes}><a onClick={this.handleClick}>{this.props.value}</a></li>
          );
        },
      });

      var Dropdown = React.createClass({
        getInitialState: function() {
          return {
            opened: false,
            value: null,
          };
        },

        handleSelect: function(value) {
          this.setState({
            opened: false,
            value: value
          })
        },

        toggle: function() {
          this.setState({
            opened: !this.state.opened
          });
        },

        render: function() {
          var content = this.state.opened ? (
            <ul className="dropdown-menu">{this.props.menuItems.map(function(item, index) {
              return <DropdownItem key={index} value={item} onClick={this.handleSelect} selected={this.state.value == item}/>;
            }, this)}</ul>
          ) : null;

          return (
            <div className="dropdown">
              <DropdownButton active={this.state.opened} title={this.state.value} onClick={this.toggle}/>
              {content}
            </div>
          );
        },
      });

      React.render(<Dropdown menuItems={["A", "B", "C", "D"]} />, document.querySelector("#example"));
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="bower_components/react/react-with-addons.js"></script>
	<script src="bower_components/react/JSXTransformer.js"></script>
	<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap-theme.css">

	<style type="text/css">
	.dropdown-menu { display: block; }
	</style>
	</head>
	<body>
	<div id="example" class="container-fluid"></div>
	<script type="text/jsx">
	var DropdownButton = React.createClass({
	getDefaultProps: function() {
	return {
	active: false,
	title: "Button"
	};
	},

	handleClick: function() {
	this.props.onClick();
	},

	render: function() {
	classes = React.addons.classSet({
	"btn btn-default btn-lg": true,
	"active": this.props.active
	});

	return (
	<button className={classes} onClick={this.handleClick}>
	{this.props.title}
	<span className="caret"></span>
	</button>
	);
	}
	});

	var DropdownItem = React.createClass({
	handleClick: function() {
	this.props.onClick(this.props.value);
	},

	render: function() {
	var classes = React.addons.classSet({
	"active": this.props.selected,
	});

	return (
	<li className={classes}><a onClick={this.handleClick}>{this.props.value}</a></li>
	);
	},
	});

	var Dropdown = React.createClass({
	getInitialState: function() {
	return {
	opened: false,
	value: null,
	};
	},

	handleSelect: function(value) {
	this.setState({
	opened: false,
	value: value
	})
	},

	toggle: function() {
	this.setState({
	opened: !this.state.opened
	});
	},

	render: function() {
	var content = this.state.opened ? (
	<ul className="dropdown-menu">{this.props.menuItems.map(function(item, index) {
	return <DropdownItem key={index} value={item} onClick={this.handleSelect} selected={this.state.value == item}/>;
	}, this)}</ul>
	) : null;

	return (
	<div className="dropdown">
	<DropdownButton active={this.state.opened} title={this.state.value} onClick={this.toggle}/>
	{content}
	</div>
	);
	},
	});

	React.render(<Dropdown menuItems={["A", "B", "C", "D"]} />, document.querySelector("#example"));
	</script>
	</body>
	</html>