let ProductCategoryRow = React.createClass({
  name: "ProductCategoryRow",

  componentDidMount: function () {
    console.log("Component did mountDM", this.name);
  },
  getInitialState: function () {
    console.log("Get Initial State", this.name);
    return { data: [] };
  },
  render:  function () {
    return (<tr><th colSpan="2">{this.props.category}</th></tr>);
  }
});

let ProductRow = React.createClass({
  name: "ProductRow",

  componentDidMount: function () {
    console.log("Component did mountDM", this.name);
  },
  getInitialState: function () {
    console.log("Get Initial State", this.name);
    return { data: [] };
  },
  render: function () {
    let 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>
    );
  }
});

let ProductTable = React.createClass({
  name: "ProductTable",
  componentDidMount: function () {
    console.log("Component did mountDM", this.name);
  },
  getInitialState: function () {
    console.log("Get Initial State", this.name);
    return { data: [] };
  },
  render: function () {
    let rows = [];
    let lastCategory = null;
    this.props.products.forEach(function (product) {
      if (product.category !== lastCategory) {
        rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
      }
      rows.push(<ProductRow product={product} key={product.name} />);
      lastCategory = product.category;
    });
    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
        {rows}
        </tbody>
      </table>
    );
  }
});

ReactDOM.render(
  <ProductTable products={[]} />,
  document.getElementById("content")
);