React JS - Product Search

main.js

// https://facebook.github.io/react/docs/thinking-in-react.html

var React = require('react');
var ReactDOM = require('react-dom');

var ProductCategoryRow = React.createClass({
    render: function() {
        return(
            <tr>
                <th colSpan="2">
                    {this.props.category}
                </th>
            </tr>
        );
    }
});

var ProductRow = React.createClass({
    styledName: function() {
        if (!this.props.product.stocked) {
            return (
                <span style={{color: 'red'}}>
                    {this.props.product.name}
                </span>
            );
        }

        return this.props.product.name;
    },

    render: function() {
        return(
            <tr>
                <td>{this.styledName()}</td>
                <td>{this.props.product.price}</td>
            </tr>
        );
    }
});

var SearchBar = React.createClass({
    handleChange: function() {
        this.props.onUserInput(
            this.refs.filterTextInput.value,
            this.refs.inStockOnlyInput.checked
        );
    },

    render: function() {
        return (
            <form>
                <input
                    type="text"
                    placeholder="Search..."
                    value={this.props.filterText}
                    ref="filterTextInput"
                    onChange={this.handleChange}
                />
                <p>
                    <input
                        type="checkbox"
                        checked={this.props.inStockOnly}
                        ref="inStockOnlyInput"
                        onChange={this.handleChange}
                    />
                    {' '}
                    Only show products in stock
                </p>
            </form>
        );
    }
});

var ProductTable = React.createClass({
    oganizeProductCategories: function(products) {
        var productCategories = {};

        this.props.products.forEach(function(product) {
            if (false === productCategories.hasOwnProperty(product.category)) {
                productCategories[product.category] = [];
            }
            productCategories[product.category].push(product);
        });

        return productCategories;
    },

    render: function() {
        var productCategories = this.oganizeProductCategories();
        var rows = [];

        for (var category in productCategories) {
            var didPushCategory = false;

            var products = productCategories[category];
            products.forEach(function(product) {
                if (product.name.toLowerCase().indexOf(this.props.filterText.toLowerCase()) === -1 ||
                    (this.props.inStockOnly && !product.stocked)
                ) {
                    return;
                }

                if (!didPushCategory) {
                    rows.push(
                        <ProductCategoryRow category={category} key={category} />
                    );
                    didPushCategory = true;
                }

                rows.push(
                    <ProductRow product={product} key={product['name']} />
                );
            }.bind(this));
        }

        return (
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                    </tr>
                </thead>
                <tbody>
                    {rows}
                </tbody>
            </table>
        );
    }
});

var FilterableProductTable = React.createClass({
    getInitialState: function() {
        return {
            filterText: '',
            inStockOnly: false
        };
    },

    handleUserInput: function(filterText, inStockOnly) {
        this.setState({
            filterText: filterText,
            inStockOnly: inStockOnly
        });
    },

    render: function() {
        return (
            <div>
                <SearchBar
                    filterText={this.state.filterText}
                    inStockOnly={this.state.inStockOnly}
                    onUserInput={this.handleUserInput}
                />
                <ProductTable
                    products={this.props.products}
                    filterText={this.state.filterText}
                    inStockOnly={this.state.inStockOnly}
                />
            </div>
        );
    }
});


var PRODUCTS = [
  {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
  {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
  {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
  {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
  {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
  {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];

ReactDOM.render(
    <FilterableProductTable products={PRODUCTS} />,
    document.getElementById('content')
);