Updating Thinking in React doc to replace refs with event handlers (#8815)
* Updating Thinking in React doc to replace refs * Updating doc copy to reflect changes to example
Rohan Nair committed
Jan 17, 2017 at 13:17 UTC
5d96162b57824502497e49edf01348c60532758f
1 file changed
+2
-2
docs/docs/thinking-in-react.md
+2
-2
@@ -132,7 +132,7 @@ You can start seeing how your application will behave: set `filterText` to `"bal
132
133
## Step 5: Add Inverse Data Flow
134
135
-<p data-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 <a href="http://codepen.io/snakajima/pen/JbYQvL/">Thinking In React: Step 5</a> on <a href="http://codepen.io">CodePen</a>.</p>
135
+<p data-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 <a href="http://codepen.io/rohan10/pen/qRqmjd">Thinking In React: Step 5</a> on <a href="http://codepen.io">CodePen</a>.</p>
136
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
137
138
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
141
142
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`.
143
144
-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.
144
+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.
145
146
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.
147