title: how to remove an item from a list with a click event in ReactJS?
body: <pre><code>var FilterList = React.createClass({
    remove: function(item){
  
      this.props.items = this.props.items.filter(function(itm){
        return item.id !== itm.id;
      });
  
      return false;
    },
    render: function() {
      var createItem = function(item) {
        return (
          &lt;li&gt;
            &lt;span&gt;{item}&lt;/span&gt;
            &lt;a href data-id="{item.id}" class="remove-filter" onClick={this.remove.bind(item)}&gt;remove&lt;/a&gt;
          &lt;/li&gt;
  
        );
      };
      return &lt;ul&gt;{this.props.items.map(createItem.bind(this))}&lt;/ul&gt;;
    }
  });
  var FilterApp = React.createClass({
    getInitialState: function() {
      return {items: [], item: {
        id: 0,
        type: null
      }};
    },
    onChangeType: function(e){
      this.setState({
        item: {
          id: this.state.items[this.state.items.length],
          type: e.target.value
        }
      });
    },
    handleSubmit: function(e) {
      e.preventDefault();
      var nextItems = this.state.items.concat([this.state.item]);
      var item = {};
      this.setState({items: nextItems, item: {}});
    },
    render: function() {
      return (
        &lt;div&gt;
          &lt;h3&gt;Filters&lt;/h3&gt;
          &lt;FilterList items={this.state.items} /&gt;
  
          &lt;form className="filter" onSubmit={this.handleSubmit}&gt;
            &lt;fieldset&gt;
              &lt;legend&gt;Filter&lt;/legend&gt;
              &lt;div className="form-grp"&gt;
                &lt;select name="type" onChange={this.onChangeType}&gt;
                  &lt;option&gt;foo&lt;/option&gt;
                  &lt;option&gt;bar&lt;/option&gt;
                  &lt;option&gt;baz&lt;/option&gt;
                &lt;/select&gt;
              &lt;/div&gt;
            &lt;/fieldset&gt;
            &lt;div className="actions"&gt;
              &lt;button&gt;{'Add #' + (this.state.items.length + 1)}&lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  });
  
  React.render(&lt;FilterApp /&gt;, document.body);
  </code></pre>
  
  <p>I cannot seem to wrap my head around how to remove an item from the list. Probably making a ton of other bad design decisions here too, newbs.</p>