JSFiddle - React, Tailwind, and code Playground

by Ashley Wilson

HTML

<script src="http://fb.me/react-with-addons-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var FilterList = React.createClass({
  remove: function(item) {
    return function(e) {
      e.preventDefault();
      return this.props.onRemove(item);
    }.bind(this);
  },

  render: function() {
    var items = this.props.items.map(function(item, i) {
      return (
        <li key={i}>
          <span>{item.type}</span>
          <a href data-id={item.id} className="remove-filter" onClick={this.remove(item)}>remove</a>
        </li>
      );
    }.bind(this));

    return <ul>{items}</ul>;
  }
});

var FilterApp = React.createClass({
  getInitialState: function() {
    return {
      items: [{id: 'foo', type: 'Foo'}, {id: 'bar', type: 'Bar'}]
    };
  },

  remove: function(item){
    var items = this.state.items.filter(function(itm){
      return item.id !== itm.id;
    });

    this.setState({
      items: items
    });
  },

  render: function() {
    return (
      <div>
        <FilterList items={this.state.items} onRemove={this.remove}/>
      </div>
    );
  }
});

React.renderComponent(<FilterApp />, document.body);