Step 4: Identify where your state should live.

public/scripts/thinking.js

@@ -2,11 +2,11 @@ let ProductCategoryRow = React.createClass({
   name: "ProductCategoryRow",
 
   componentDidMount: function () {
-    console.log("Component did mountDM", this.name);
+    console.log("Component did mountDM", this.name, "State", this.state, "Props", this.props);
   },
   getInitialState: function () {
     console.log("Get Initial State", this.name);
-    return { data: [] };
+    return null;
   },
   render:  function () {
     return (<tr><th colSpan="2">{this.props.category}</th></tr>);
@@ -17,16 +17,16 @@ let ProductRow = React.createClass({
   name: "ProductRow",
 
   componentDidMount: function () {
-    console.log("Component did mountDM", this.name);
+    console.log("Component did mountDM", this.name, "State", this.state, "Props", this.props);
   },
   getInitialState: function () {
     console.log("Get Initial State", this.name);
-    return { data: [] };
+    return null;
   },
   render: function () {
     let name = this.props.product.stocked
       ? this.props.product.name
-      : <span style={{color: 'red'}}>{this.props.product.name}</span>;
+      : <span style={{ color: 'red' }}>{this.props.product.name}</span>;
     return (
       <tr>
         <td>{name}</td>
@@ -39,22 +39,26 @@ let ProductRow = React.createClass({
 let ProductTable = React.createClass({
   name: "ProductTable",
   componentDidMount: function () {
-    console.log("Component did mountDM", this.name);
+    console.log("Component did mountDM", this.name, "State", this.state, "Props", this.props);
   },
   getInitialState: function () {
     console.log("Get Initial State", this.name);
-    return { data: [] };
+    return null;
   },
   render: function () {
     let rows = [];
     let lastCategory = null;
     this.props.products.forEach(function (product) {
+      // Apply name and stock filters.
+      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>
@@ -74,18 +78,18 @@ let ProductTable = React.createClass({
 let SearchBar = React.createClass({
   name: "SearchBar",
   componentDidMount: function () {
-    console.log("Component did mountDM", this.name);
+    console.log("Component did mountDM", this.name, "State", this.state, "Props", this.props);
   },
   getInitialState: function () {
-    console.log("Get Initial State", this.name);
-    return { data: [] };
+    console.log("Get Initial State", this.name, "Props", this.props);
+    return null;
   },
   render: function () {
     return (
       <form>
-        <input type="text" placeholder="Search..." />
+        <input type="text" placeholder="Search..." value={this.props.filterText} />
         <p>
-          <input type="checkbox" />
+          <input type="checkbox" checked={this.props.inStockOnly} />
           {' '}
           Only show products in stock
         </p>
@@ -97,17 +101,28 @@ let SearchBar = React.createClass({
 let FilterableProductTable = React.createClass({
   name: "FilterableProductTable",
   componentDidMount: function () {
-    console.log("Component did mountDM", this.name);
+    console.log("Component did mountDM", this.name, this.name, "State", this.state, "Props", this.props);
   },
   getInitialState: function () {
-    console.log("Get Initial State", this.name);
-    return { data: [] };
+    let state = {
+      filterText: "ball",
+      inStockOnly: true
+    };
+    console.log("Get Initial State", this.name, state, "Props", this.props);
+    return state;
   },
   render: function () {
     return (
       <div>
-        <SearchBar />
-        <ProductTable products={this.props.products} />
+        <SearchBar
+          filterText={this.state.filterText}
+          inStockOnly={this.state.inStockOnly}
+        />
+        <ProductTable
+          products={this.props.products}
+          filterText={this.state.filterText}
+          inStockOnly={this.state.inStockOnly}
+        />
       </div>
     );
   }