@ -132,7 +132,7 @@ You can start seeing how your application will behave: set `filterText` to `"bal
## Step 5: Add Inverse Data Flow
<pdata-height="265"data-theme-id="0"data-slug-hash="JbYQvL"data-default-tab="js,result"data-user="snakajima"data-embed-version="2"data-pen-title="Thinking In React: Step 5"class="codepen">See the Pen <ahref="http://codepen.io/snakajima/pen/JbYQvL/">Thinking In React: Step 5</a> on <ahref="http://codepen.io">CodePen</a>.</p>
<pdata-height="265"data-theme-id="0"data-slug-hash="JbYQvL"data-default-tab="js,result"data-user="snakajima"data-embed-version="2"data-pen-title="Thinking In React: Step 5"class="codepen">See the Pen <ahref="http://codepen.io/rohan10/pen/qRqmjd">Thinking In React: Step 5</a> on <ahref="http://codepen.io">CodePen</a>.</p>
So far, we've built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it's time to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`.
@ -141,7 +141,7 @@ React makes this data flow explicit to make it easy to understand how your progr
If you try to type or check the box in the current version of the example, you'll see that React ignores your input. This is intentional, as we've set the `value` prop of the `input` to always be equal to the `state` passed in from `FilterableProductTable`.
Let's think about what we want to happen. We want to make sure that whenever the user changes the form, we update the state to reflect the user input. Since components should only update their own state, `FilterableProductTable` will pass a callback to `SearchBar` that will fire whenever the state should be updated. We can use the `onChange` event on the inputs to be notified of it. And the callback passed by `FilterableProductTable` will call `setState()`, and the app will be updated.
Let's think about what we want to happen. We want to make sure that whenever the user changes the form, we update the state to reflect the user input. Since components should only update their own state, `FilterableProductTable` will pass callbacks to `SearchBar` that will fire whenever the state should be updated. We can use the `onChange` event on the inputs to be notified of it. The callbacks passed by `FilterableProductTable` will call `setState()`, and the app will be updated.
Though this sounds complex, it's really just a few lines of code. And it's really explicit how your data is flowing throughout the app.