You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/thinking-in-react.md
+5-5Lines changed: 5 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -45,7 +45,7 @@ You'll see here that we have five components in our simple app. We've italicized
45
45
46
46
1.**`FilterableProductTable` (orange):** contains the entirety of the example
47
47
2.**`SearchBar` (blue):** receives all *user input*
48
-
3.**`ProductTable` (green):** displays and filters the *data collection* based on *user input*
48
+
3.**`ProductTable` (green):** displays the *data collection* based on *user input*
49
49
4.**`ProductCategoryRow` (turquoise):** displays a heading for each *category*
50
50
5.**`ProductRow` (red):** displays a row for each *product*
51
51
@@ -106,7 +106,7 @@ So finally, our state is:
106
106
107
107
## Step 4: Identify Where Your State Should Live
108
108
109
-
<pdata-height="600"data-theme-id="0"data-slug-hash="qPrNQZ"data-default-tab="js"data-user="lacker"data-embed-version="2"class="codepen">See the Pen <ahref="https://codepen.io/gaearon/pen/qPrNQZ">Thinking In React: Step 4</a> on <ahref="http://codepen.io">CodePen</a>.</p>
109
+
<pdata-height="600"data-theme-id="0"data-slug-hash="QqgJjK"data-default-tab="js"data-user="danielsbird"data-embed-version="2"class="codepen">See the Pen <ahref="https://codepen.io/danielsbird/pen/QqgJjK/">Thinking In React: Step 4</a> on <ahref="https://codepen.io">CodePen</a>.</p>
110
110
111
111
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.
112
112
@@ -121,17 +121,17 @@ For each piece of state in your application:
121
121
122
122
Let's run through this strategy for our application:
123
123
124
-
*`ProductTable` needs to filter the product list based on state and `SearchBar` needs to display the search text and checked state.
124
+
*`ProductTable` needs to display the filtered product list and `SearchBar` needs to display the search text and checked state.
125
125
* The common owner component is `FilterableProductTable`.
126
126
* It conceptually makes sense for the filter text and checked value to live in `FilterableProductTable`
127
127
128
-
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`.
128
+
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`.
129
129
130
130
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.
131
131
132
132
## Step 5: Add Inverse Data Flow
133
133
134
-
<pdata-height="600"data-theme-id="0"data-slug-hash="LzWZvb"data-default-tab="js,result"data-user="rohan10"data-embed-version="2"data-pen-title="Thinking In React: Step 5"class="codepen">See the Pen <ahref="https://codepen.io/gaearon/pen/LzWZvb">Thinking In React: Step 5</a> on <ahref="http://codepen.io">CodePen</a>.</p>
134
+
<pdata-height="600"data-theme-id="0"data-slug-hash="QqgJNG"data-default-tab="js,result"data-user="danielsbird"data-embed-version="2"data-pen-title="Thinking In React: Step 5"class="codepen">See the Pen <ahref="https://codepen.io/danielsbird/pen/QqgJNG/">Thinking In React: Step 5</a> on <ahref="https://codepen.io">CodePen</a>.</p>
135
135
136
136
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`.
0 commit comments