Step 5: Add inverse data flow.

public/scripts/thinking.js

@@ -26,7 +26,7 @@ let ProductRow = React.createClass({
   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>
@@ -84,13 +84,30 @@ let SearchBar = React.createClass({
     console.log("Get Initial State", this.name, "Props", this.props);
     return null;
   },
+  handleChange: function (e) {
+    this.props.onUserInput(
+      this.refs.filterTextInput.value,
+      this.refs.inStockOnlyInput.checked
+    );
+  },
   render: function () {
     return (
       <form>
-        <input type="text" placeholder="Search..." value={this.props.filterText} />
+        <input
+          type="text"
+          placeholder="Search..."
+          ref="filterTextInput"
+          value={this.props.filterText}
+          onChange={this.handleChange}
+        />
         <p>
-          <input type="checkbox" checked={this.props.inStockOnly} />
-          {' '}
+          <input
+            type="checkbox"
+            ref="inStockOnlyInput"
+            checked={this.props.inStockOnly}
+            onChange={this.handleChange}
+          />
+          {" "}
           Only show products in stock
         </p>
       </form>
@@ -105,18 +122,23 @@ let FilterableProductTable = React.createClass({
   },
   getInitialState: function () {
     let state = {
-      filterText: "ball",
-      inStockOnly: true
+      filterText: "",
+      inStockOnly: false
     };
     console.log("Get Initial State", this.name, state, "Props", this.props);
     return state;
   },
+  handleUserInput: function (filterText, inStockOnly) {
+    console.log("FPT.OSC", arguments);
+    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}
@@ -129,12 +151,12 @@ let FilterableProductTable = React.createClass({
 });
 
 let 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'}
+  { 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(