<div id='container'></div>

var SearchableList = React.createClass({
  // render, renderItems
  // state - filter
  // properties = items
  getInitialState: function() {
    return { filter: '' }
  },
  mixins: [React.addons.LinkedStateMixin],
  propTypes: {
    items: React.PropTypes.arrayOf(React.PropTypes.shape({
      name: React.PropTypes.string.isRequired,
      id: React.PropTypes.number.isRequired
    })).isRequired
  },
  renderItems: function(filter) {
    var items = _.filter(this.props.items, function(item) {
      return item.name.indexOf(filter) > -1;
    });
    
    return items.map(function(item) {
      return <li>{item.name}</li>
    });
  },
  render: function() {
      return (
      	<div>
        	<input type='text' valueLink={this.linkState('filter')} />
      		<ul>
        		{this.renderItems(this.state.filter)}
        	</ul>
        </div>
      )
    }
});

 var items = [
  { name: 'sunday', id: 1 }, 
  { name: 'monday', id: 2 }, 
  { name: 'tuesday', id: 3 },
  { name: 'wednesday', id: 4 },
  { name: 'thursday', id: 5 }, 
  { name: 'friday', id: 6 },
  { name: 'saturday', id: 7 }
];
React.render(<SearchableList items={items} />, document.getElementById('container'));