From 4ca68853682a2cf6e2f07f562c269c472010fcb7 Mon Sep 17 00:00:00 2001 From: Rohan Nair Date: Tue, 17 Jan 2017 13:17:32 -0500 Subject: [PATCH] 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 (cherry picked from commit 5d96162b57824502497e49edf01348c60532758f) --- docs/docs/thinking-in-react.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/docs/thinking-in-react.md b/docs/docs/thinking-in-react.md index 8c82a658b9..6e212ba92f 100644 --- a/docs/docs/thinking-in-react.md +++ b/docs/docs/thinking-in-react.md @@ -132,7 +132,7 @@ You can start seeing how your application will behave: set `filterText` to `"bal ## Step 5: Add Inverse Data Flow -

See the Pen Thinking In React: Step 5 on CodePen.

+

See the Pen Thinking In React: Step 5 on CodePen.

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.