JSFiddle - React, Tailwind, and code Playground

by Michael LaCroix

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>

CSS

input {
    margin-bottom: 1em;
}

.results {
    padding: 0.5em;
    background: #f8f8f8;
}

h4 {
    margin: 0;
}

JavaScript 1.7

/** @jsx React.DOM */

var Filters = React.createClass({
    handleFilterChange: function() {
        var value = this.refs.filterInput.getDOMNode().value;
        this.props.updateFilter(value);
    },
    render: function() {
        return <input type="text" ref="filterInput" onChange={this.handleFilterChange} placeholder="Filter" />;
    }
});

var List = React.createClass({
    render: function() {
        var content;
        if (this.props.items.length > 0) {
            var items = this.props.items.map(function(item) {
                return <li>{item}</li>;
            });
            content = <ul>{items}</ul>
        } else {
            content = <p>No items matching this filter</p>;
        }
        return (
            <div className="results">
                <h4>Results</h4>
                {content}
            </div>
        );
    }
});

var ListContainer = React.createClass({
    getInitialState: function() {
        return {
            listItems: ['Chicago', 'New York', 'Tokyo', 'London', 'San Francisco', 'Amsterdam', 'Hong Kong'],
            nameFilter: ''
        };
    },
    handleFilterUpdate: function(filterValue) {
        this.setState({
            nameFilter: filterValue
        });
    },
    render: function() {
        var displayedItems = this.state.listItems.filter(function(item) {
            var match = item.toLowerCase().indexOf(this.state.nameFilter.toLowerCase());
            return (match !== -1);
        }.bind(this));

        return (
            <div>
                <Filters updateFilter={this.handleFilterUpdate} />
                <List items={displayedItems} />
            </div>
        );
    }
});

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