React with CSS filtering

by phloe

HTML

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

CSS

* {
    padding: 0;
    margin: 0;
}

html {
    font: 100%/1.25 Helvetica Neue, Arial, sans-serif;
}
body {
    padding: 20px;
}
input {
    padding: 5px 0;
    font: inherit;
}

li {
    display: block;
}

JavaScript 1.7

// make up some random data
var firstnames = ["Arnold", "Andrew", "Burt", "Brad", "Carl", "Clark", "Darren", "Dennis", "Dustin", "Emmett", "Eric", "Frank", "Fred", "George", "Greg", "Hank", "Hugh", "Ivan", "Jeremy", "John", "Kurt", "Kirk", "Lars", "Lewis", "Mario", "Michael", "Nathan", "Nick", "Oscar", "Otto", "Patrick", "Pete", "Phillip", "Rick", "Rod", "Ryan", "Sam", "Sean", "Scott", "Tim", "Toby", "Trevor", "Ulysses", "Vern", "Victor", "William"];
var surnames = ["Anderson", "Benson", "Carlisle", "Dermott", "Eaves", "Foley", "Gallagher", "Hartman", "Ingall", "Jennings", "Kirkwood", "Lambert", "Matthews", "Nicholson", "Olliver", "Prescott", "Quinn", "Richards", "Sandcroft", "Tibbs", "Upton", "Wilson"];

function pick (array) {
    return array[Math.floor(Math.random() * array.length)];
}

var data = [];
var i = 0;
var count = 5000;
while (i < count) {
    data.push({
        name: pick(firstnames) + " " + pick(surnames)
    });
    i++;
}



// define a list component
var List = React.createClass({

    shouldComponentUpdate: function (props, state) {
        // performs some sort of test whether data changed 
        if (props.data.length === this.props.data.length) {
            // skip rerender
            return false;
        }
        return true;
    },
    
    render: function () {
        // generate list items with data-search attributes
        var items = this.props.data.map(function (item, index) {
            return <li key={index} data-search={item.name.toLowerCase()}>{item.name}</li>;
        });
        
        return (
            <ul>{items}</ul>
        );
    }

});

// define dummy app
var App = React.createClass({
    getInitialState: function () {
        return {
            filter: ""
        };
    },
    
    handleKeyUp: function () {
        this.setState({
            filter: this.refs.filter.getDOMNode().value.toLowerCase()
        });
    },
    
    render: function () {
        
        // if filter is non-empty - add css...