Thinking In React Step 5

by Shaun Ellis

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

CSS

body {
  padding: 20px
}

JavaScript 1.7

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

var ProductRow = React.createClass({
  render: function() {
    var name = this.props.product.stocked ?
      this.props.product.name :
      < span style = {
        {
          color: 'red'
        }
      } > {
        this.props.product.name
      } < /span>;
    return ( < tr >
      < td > {
        name
      } < /td> < td > {
      this.props.product.price
    } < /td> < /tr >
  );
}
});

var ProductTable = React.createClass({
    render: function() {
      var rows = [];
      var lastCategory = null;
      this.props.products.forEach(function(product) {
          if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)) {
            return;
          }
          if (product.category !== lastCategory) {
            rows.push( < ProductCategoryRow category = {
                product.category
              }
              key = {
                product.category
              }
              />);
            }
            rows.push( < ProductRow product = {
                product
              }
              key = {
                product.name
              }
              />);
              lastCategory = product.category;
            }.bind(this));
          return ( < table >
            < thead >
            < tr >
            < th > Name < /th> < th > Price < /th > < /tr> < /thead > < tbody > {
              rows
            } < /tbody> < /table >
          );
        }
      });

    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..."
        ...