exploring state and events - part 6

Author: StephenGrider

dropdown/src/dropdown.jsx

@@ -13,16 +13,26 @@ module.exports = React.createClass({
   getInitialState: function(){
     return { open: false }
   },
+  handleItemClick: function(item) {
+    this.setState({
+      open: false,
+      itemTitle: item
+    });
+  },
   render: function() {
     var list = this.props.items.map(function(item){
-      return <ListItem item={item} />
-    });
+      return <ListItem
+              item={item}
+              whenItemClicked={this.handleItemClick}
+              className={this.state.itemTitle === item ? "active" : "" }
+              />
+    }.bind(this));
 
     return <div className="dropdown">
       <Button
         whenClicked={this.handleClick}
         className="btn-default"
-        title={this.props.title}
+        title={this.state.itemTitle || this.props.title}
         subTitleClassName="caret"
         />
       <ul className={"dropdown-menu " + (this.state.open ? "show" : "") }>

dropdown/src/list-item.jsx

@@ -1,7 +1,12 @@
 var React = require('react');
 
 module.exports = React.createClass({
+  handleClick: function() {
+    this.props.whenItemClicked(this.props.item);
+  },
   render: function() {
-    return <li><a>{this.props.item}</a></li>
+    return <li className={this.props.className}>
+      <a onClick={this.handleClick}>{this.props.item}</a>
+    </li>
   }
 });