var C = React.createClass({

  handleSelect(index){

    this.props.onSelect(index);

  },

  render(){

    var options = this.props.options

      // map, but keep track of the index

      .map((x, i) => [x, i])

      // some filtering thing

      // this also allows efficient inserts and removals by giving a good key

      .filter(([x, i]) => x[0] === 'b');

    return (

      <div>

        <input value={this.props.value} onChange={this.handleChange} />

        <ul role="listbox">

          {options.map(([x, i]) =>

             <li key={i} onClick={e => this.handleSelect(i)} 

                 onKeyPress={e => e.key === "Enter" || e.key === " " ? this.handleSelect(i) : null}

                 tabIndex={i} role="option"

             >

                 {this.props.renderItem(x, i)}

             </li>

          )}

        </ul>

      </div>

    );

  }

});

​

var ITEMS = ["foo", "bar", "baz", "quux", "bananas"];

var App = React.createClass({

  getInitialState(){

    return {selected: "baz"};

  },

  handleSelect(index){

    this.setState({selected: this.props.items[index]});

  },

  render(){

    var renderItem = x => { 

      var cn = x === this.state.selected ? 'active' : null;

      return <strong className={cn}>{x}</strong>

    }

    return <div>

      Hello, world!

      <C options={this.props.items} 

         renderItem={renderItem} 

         onSelect={this.handleSelect} value={this.state.selected} />

    </div>

  }

});

​

React.render(<App items={ITEMS} />, document.body);