diff --git a/content/docs/thinking-in-react.md b/content/docs/thinking-in-react.md index 8f3786d8153..7590e276320 100644 --- a/content/docs/thinking-in-react.md +++ b/content/docs/thinking-in-react.md @@ -45,7 +45,7 @@ You'll see here that we have five components in our simple app. We've italicized 1. **`FilterableProductTable` (orange):** contains the entirety of the example 2. **`SearchBar` (blue):** receives all *user input* - 3. **`ProductTable` (green):** displays and filters the *data collection* based on *user input* + 3. **`ProductTable` (green):** displays the *data collection* based on *user input* 4. **`ProductCategoryRow` (turquoise):** displays a heading for each *category* 5. **`ProductRow` (red):** displays a row for each *product* @@ -106,7 +106,7 @@ So finally, our state is: ## Step 4: Identify Where Your State Should Live -

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

+

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

OK, so we've identified what the minimal set of app state is. Next, we need to identify which component mutates, or *owns*, this state. @@ -121,17 +121,17 @@ For each piece of state in your application: Let's run through this strategy for our application: - * `ProductTable` needs to filter the product list based on state and `SearchBar` needs to display the search text and checked state. + * `ProductTable` needs to display the filtered product list and `SearchBar` needs to display the search text and checked state. * The common owner component is `FilterableProductTable`. * It conceptually makes sense for the filter text and checked value to live in `FilterableProductTable` -Cool, so we've decided that our state lives in `FilterableProductTable`. First, add an instance property `this.state = {filterText: '', inStockOnly: false}` to `FilterableProductTable`'s `constructor` to reflect the initial state of your application. Then, pass `filterText` and `inStockOnly` to `ProductTable` and `SearchBar` as a prop. Finally, use these props to filter the rows in `ProductTable` and set the values of the form fields in `SearchBar`. +Cool, so we've decided that our state lives in `FilterableProductTable`. First, add an instance property `this.state = {filterText: '', inStockOnly: false}` to `FilterableProductTable`'s `constructor` to reflect the initial state of your application. Next, instead of passing `this.props.products` to ProductTable, pass only the products that match the search text and checkbox value. Then, pass `filterText` and `inStockOnly` to `SearchBar` as a prop. Finally, use these props to set the values of the form fields in `SearchBar`. You can start seeing how your application will behave: set `filterText` to `"ball"` and refresh your app. You'll see that the data table is updated correctly. ## 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`.